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 코드와 마크업으로 작성했다면 큰 문제는 없지 않을까 생각한다.

점심을 먹고와서 우연히 CDK의 질문글을 보다가 나도 궁금해져서 실험을 해봤다.

실험인즉, 브라우저별로 border의 변화가 다를까? 라는 의문을 두고 실험을 했는데 예상처럼 모든브라우져가 조금씩 차이가 있었다.

총 8px의 굵기인 border 를 border-right 부분만 1px씩 줄여나가면서 변화를 지켜봤는데 변화과정이나 결과가 참 묘하군..

FireFox 2.0

8 By 8 FF border 8 by 8
8 By 7 FF border 8 by 7
8 By 6 FF border 8 by 6
8 By 5 FF border 8 by 5
8 By 4 FF border 8 by 4
8 By 3 FF border 8 by 3
8 By 2 FF border 8 by 2
8 By 1 FF border 8 by 1

IE6.0

8 By 8 IE border 8 by 8
8 By 7 IE border 8 by 7
8 By 6 IE border 8 by 6
8 By 5 IE border 8 by 5
8 By 4 IE border 8 by 4
8 By 3 IE border 8 by 3
8 By 2 IE border 8 by 2
8 By 1 IE border 8 by 1

Opera 9

8 By 8 Op border 8 by 8
8 By 7 Op border 8 by 7
8 By 6 Op border 8 by 6
8 By 5 Op border 8 by 5
8 By 4 Op border 8 by 4
8 By 3 Op border 8 by 3
8 By 2 Op border 8 by 2
8 By 1 Op border 8 by 1

DTD에 따라 달라질꺼라 생각되진 않고.. Opera브라우저가 Acid2 Test를 통과했으니 Opera의 랜더링 방식이 옳은걸지도 모르지만 모든 브라우저에서 동일하게 보이는 방법으로 우회해서 해야되지 않을까 싶네..

크로스 브라우징을 추구하면서 퍼팩트픽셀을 요구하는 사람들에게는 border의 표현 방식을 신중히 고려해서 작업해야하지 않을까 생각된다.