Feed on
Posts
Comments

정말 오랜만에 블로그에 글을 적어 보는 것 같다
입사한 뒤로 블로그를 너무 멀리 했던지 온라인상으로 알고 지내던 분들과도 점점 멀어지는 기분도 들고.. 입사한지 1년이 가까워지는 지금에서야 다시 블로그에 글을 쓰니 그동안 참 너무 무신경했다는 생각도 든다
(사실은 글을 간간히 적었는데 모두 Publish 하지 못하고 Draft해 놓고 있어 어떻게 처리해야할지 난감한…-_-)

요즘 IE8에 대한 Beta1 테스트 때문에 Firefox3 에 대해서는 전혀 모르고 있었는데
몇일전 Firefox3 Download 소식을 듣고서야 알게 됐다.
외견상의 변화와 보다 편리한 사용성을 위한 기능들 그리고 보안강화 등은 일반 사용자들이 느끼는 부분이고,
웹 개발자나 확장 기능 개발자들이 에게는 많은 벡엔드 기능을 추가 되었다고 한다.
나야 웹표준과 접근성에 관심이 있다보니 기술적인 부분보다는 달라지는 렌더링과 css개선과 확장여부 등이 더 궁금했었다.
(자세한 Firefox 3에 추가된 새로운 기능은 Mozilla Developer Center 를 참고하면 된다)

Firefox3는 Firefox2 보다 향상된 표준에 가까운 HTML 렌더링을 한다고 한다.
Acid2 Test를 봐도 알겠지만 Firefox2는 통과하지 못한다는 것을 알 수있고 Firefox3는 통과 한다고 하지 않았나..
무엇이 달라졌는지 모든 부분에 테스트를 해봐야 겠지만 우선 Form 컨트롤러들의 레이아웃 렌더링에 차이가 발생하는 것을 발견했다.
(이미지 사이즈를 보지말고 숫자를 보도록 하자.. 캡쳐를 잘못해서 사이즈가 다르다..-_-)

Firefox 3 Firefox 2

<input type=”text”>

Firefox3 inputtext boxmodel

<input type=”text”>

Firefox2 inputtext boxmodel

<input type=”radio”>

Firefox3 radio boxmodel

<input type=”radio”>

Firefox2 radio boxmodel

<input type=”checkbox”>

Firefox3 checkbox boxmodel

<input type=”checkbox”>

Firefox2 checkbox boxmodel

<textarea cols=”20″ rows=”3″>

Firefox3 textarea boxmodel

<textarea cols=”20″ rows=”3″>

Firefox2 textarea boxmodel

<select>

Firefox3 select boxmodel

<select>

Firefox2 select boxmodel

<option>

Firefox3 option boxmodel

<option>

Firefox2 option boxmodel

위 표를 보면 모두 조금씩 크기 차이가 발생했는데 특히나 checkbox, radio, select 는 기본으로 차지하는 사이즈가 달라지니 미리 대비를 해야 할 것 같고 textarea의 경우 예제에 cols, rows 속성값이 나와있지만 cols, rows 선언값에 대한 width, height 값이 차이가 났었다.

위 문제중 checkbox, radio와 텍스트를 함께 사용한 예를 보면
일단 <input type=”checkbox”>, <input type=”radio”> 는 4px의 차이가 나는데(border의 차이를 빼면 2px 차이가 난다)
아래 예 처럼 텍스트와 함께 쓰일 경우 Firefox2와 달리 차이가 발생하게 된다.

Firefox 3 Firefox 2
Firefox3 ex Firefox2 ex

위와 같은 현상을 막기 위해서는 input에 vertical-align 을 지정해주면 해결 되지만 vertical-align을 줄 수 없을 상황이 올 수도 있으니 변경되는 상황에 대해 잘 파악하고 대비해야겠다.
그리고 select 의 높이 차이와 textarea 의 cols, rows 차이는 각각 width, height 값을 선언해주면 해결되므로 미리 알고 있도록 하자

Firefox3가 표준렌더링에 더 완벽하게 마춰졌기 때문에 기존 Firefox2 에서 제대로 보였던 페이지라 할 지라도 제대로 보이지 않을 수도 있다.
이건 내 생각이지만 올바른 css 코드와 마크업으로 작성했다면 큰 문제는 없지 않을까 생각한다.

5 Responses to “Firefox3 출시, 달라진점은?”

  1. on 20 Jun 2008 at 9:58 am 신현석

    IE8 Beta1 테스트? 랜더링 엔진 완성된 것이 아닌데, 테스트가 의미 있을까요?

  2. on 23 Jun 2008 at 12:22 am 봄눈

    부침개님의 새 글을 보니 일단 너무 반갑네요^^

    FF3의 CSS렌더링 문제는 저도 시간내서 포스팅을 해보려던 것이었는데 먼저 수고해 주셨네요~ 이럴땐 그냥 묻어가는 센스를 발휘해야겠군요~ 잘 보고 적용하겠습니다^^

  3. on 24 Jun 2008 at 6:06 pm 김요한

    멋진 글 잘 봤습니다..!!

    “올바른 css 코드와 마크업으로 작성했다면 큰 문제는 없지 않을까” 것에 대한 제 의견은 CSS 초기화 및 설정을 하지 않았을 경우 문제가 생기지 않을까요..?
    기본적으로 가지고 있는 Padding, Margin, Width, Height가 변한 것 이기때문에요..

    예를들어 Default Padding, Margin, Width, Height를 이용해서 만든 사이트가 브라우져 버젼업을 하니 Look이 깨져버린거니깐요 ㅎㅎ

  4. on 24 Jun 2008 at 11:00 pm 윤 좌진

    //봄눈님 방문해주셔서 감사할 따름입니다. ^^

    //요한님 초기화, 좋은 방법이겠네요 ㅋㅋ 이젠 margin:0; padding:0; 초기화 습관에서 width:..; height:..; 까지 추가해서 사용해야 할듯 ㅎㅎ

  5. on 15 Jul 2008 at 8:45 pm 윤 좌진

    아구.. 현석님 블로그에 스팸코멘트가 너무 많아서 막아놨는데 현석님 코멘트를 놓쳐버렸네요 ^^;;
    IE8 이 비록 beta1 이지만 테스트를 통해 고쳐야될 점이 있다면 의견을 줘서 beta2, 정식출시까지 조금씩 완성도를 높여서 하위버전들의 실수를 조금이라도 막고싶은 마음이랄까요? ^^