Kevin Yank씨가 Firefox 3 RC 1 에서 새로워진 기능을 보고, 웹 개발자들이 알아야 할만한 부분을 짚어주셨습니다.

부드러운 하이픈
Firefox 3 의 CSS 개선사항을 보면 부드러운 하이픈soft hyphen이 추가된 것을 보실 수 있습니다. HTML 표준에는 있었으나 그간 브라우저들이 구현하지는 않았던 모양입니다. 이번 Firefox 3의 지원을 시작으로 IE, Safari, Opera 등의 다른 브라우저에서도 지원하게 될 것이라고 합니다. 부드러운 하이픈은 평상시에는 보이지 않지만, 내용이 밀려 내려가야 할 경우에 나타난다고 합니다. 영문을 띄어쓰기 없이 붙여썼을 때 레이아웃이 깨지거나 글이 제대로 보이지 않는 일은 많이들 겪어보셨을텐데, 이 경우에 유용하게 사용할 수 있을 것 같습니다.

실제 동작을 보시겠습니다:
사용자 삽입 이미지

Inline Blocks
이 역시 잘 알려져있지 않지만, 꽤 유용한 기능입니다. 엘리먼트 스타일에 display 타입으로 inline-block 이라는 값을 적용하면 엘리먼트는 span과 같은 inline 엘리먼트처럼 위치를 정합니다. 하지만, 내부의 컨텐트들은 해당 엘리먼트가 block 속성을 가진 것처럼 동작하게 됩니다.

모든 브라우저에서 이것만 제대로 지원된다면 그간 float 으로 삽질했던 일이 훨씬 많이 줄어들게 될 것 같습니다.
[code:js]
<ul class="gallery">
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb1.jpg"/></div>
  </li><li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb2.jpg"/></div>
  </li><li>
  …
</li></ul>

위 코드는 다음과 같이 표현됩니다.
사용자 삽입 이미지

실제 동작하는 것을 확인해보세요.

from Soft-hyphens and inline-block; Subtleties in Firefox 3 RC 1 on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2