SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

a:visited pseudo 선택자 스타일 제한?

얼마전 조금 이상한 점을 발견했는데..

크롬(chrome) 브라우저(ver.6.0.472.63)에서, a:visited 에 background-images 와 border 속성이 적용되지 않는 것을 발견했습니다. 관련된 정보를 구글링해 봤더니, stackoverflow 에서 비슷한 현상을 질문한 글이 있었습니다.

http://stackoverflow.com/questions/3788855/google-chrome-avisited-background-image-not-working

Jquery 로도 시도해 봤지만.. jQuery('a:visited').length returns 0 이라는군요.;

답변글 중에 Firefox 도 곧 그렇게 될거라는 이야기가 있습니다. 오늘 FF 4.0 베타를 설치했는데, 정말 Firefox 도 속성이 적용되지 않았습니다..

답변글에 링크된 문서인 (privacy-related changes coming to CSS :visited) 에 따르면 보안 문제로 a:visited의 처리가 바뀔꺼고.. a:visited pseudo 선택자에서 color 를 제외한 다른 속성이 제한될거라고 말하는것....... 같긴한데, 너무 어려운 이야기라 잘 모르겠습니다.ㅎ 위 링크글의 한국어 번역본 (CSS :visited에 대한 프라이버시 정책변화) 을 찾긴 했습니다만.. 역시 어렵긴 마찬가지네요. :)

아무튼, 브라우저별 테스트를 위해 간단한 테스트 페이지를 만들었습니다.

a:visited 테스트 페이지

어떻게 보이시나요? 스타일시트(CSS)에서 링크에 준 속성은 아래와 같습니다.

        a {
            color: blue;
            text-decoration: underline;
            padding: 4px;
            font-size: 18px;
        }
        a:visited {
            color: red;
            background: black;
            border: 5px solid #8da437;
        }
        a:hover {
            color: yellow;
            background: gray;
            border: 5px solid #8da437;
        }

링크를 클릭해서 :visited 상태가 되면 아래와 같이 보이는 것이 의도한 결과입니다. (IE 6 ~ 9beta), (FF 3.x) 에서 아래와 같이 보임을 확인했습니다. IE9도 아래와 같이 보였습니다.

css 의도한 결과

css 의도한 결과

하지만 webkit 기반의 chrome, safari 두개의 브라우저, 그리고 FF 4.0 beta 에서는 아래와 같이 보입니다.

webkit등 새버젼의 브라우저 테스트

Chrome, Safari, FF 4.0

정말 color 만 빨강으로 바뀌고, 다른 부분은 적용 되지 않습니다. background-image, background-color 모두 적용되지 않습니다.

hi8ar_blog_rp

최근글 목록

사실, 지금 보시고 있는 제 블로그 왼편 사이드바 최근글 목록(Recent post)에도 a:visited 일때 background-image(checkmark) 가 적용되도록 되어 있습니다. a:visited 에 배경이미지를 적용해서 사용자가 이미 방문한 글임을 표시하는 트릭(?)... 음 기술(?)은 꽤나 일반적으로 사용하는 방법이 아니었던가요? ^^;; Chrome, Safari, FF 4.0 으로 보고 계시다면 아무리 클릭해서 visited 상태로 만들어도 배경이미지가 나타나지 않는것을 확인하실 수 있습니다....;;;;;;

맥에서도 결과는 같았습니다. :) 웹킷계열은 이미 적용되지 않고 있었습니다. ( 한가지 특이한 점은 아이폰에 들어가 있는 모바일 사파리에서는 아직 그렇지 않았습니다 )

아무튼 뭐... 흥미진진하군요... :p 위 내용과 관련된 정보를 알고 계시거나, 혹시 제가 잘못 알고 있는 사항이 있다면 알려주시면 감사하겠습니다!

역시나 읽지는 않을거지만 링크기록...

 

사파리(Safari 3 Public Beta) for Windows 사용기.

1upz 님 블로그에서 윈도(windows)에서 사용가능한 사파리3(Safari3) 베타가 공개 되었다는 소식을 듣고, 바로 설치 했습니다.. ㅡ,.ㅡ'

Safari3

아예 실행조차 안되는 분들도 있다던데.. 별 이상 없이 실행 되었습니다. 다행이에요. 아무튼, 윈도에서 사파리를 볼 수 있게 되다니 놀랍습니다. :)

벌써 설치해 보신 다른 분들 처럼, 저 역시 한글이 제대로 출력되지 않았습니다. 제어판에서 국가 설정인지 뭔지를 미쿡으로, 조물딱 거려주면 한글이 나온다길레, 좀 만져줘 봤습니다. (전 한글 Windows XP 사용자..)
sf_hi8arsf_naversf_daum

한글이 나오긴 합니다.
:) 고딕체의 경우 좀 뭉게져 보이는 부분이 있네요.
다만 이렇게 국가 설정과 언어 설정을 영어(미국)으로 변경하고 나면, 다른 부분(다른 프로그램 또는 윈도)의 한글에 말썽이 생깁니다. 이렇게 설정하고는 사용하기 힘들 정도로...^^;;;

아무튼, 브라우징 속도는 그들의 주장 만큼이나 꽤 빠른 듯 합니다. 물론 이건 사람마다 다르게 느낄 수 있는 부분이겠지만요. 그렇지만..... 예쁩니다! 낄낄. 항상 Safari Test 따위의 사이트에서 스크린샷으로만 접해 보던, 애플의 미려한(?) 글씨체를 사모하고 있는 저로써는 이 정도의 체감도 굉장하기만 합니다.

Safari_dA

에드센스 마저도 아름다워 보입니다. ㅡ,.


역시 외국 사이트들의 경우, 큰 문제는 없어 보입니다.

설치시, 시키지 않아도, IE 와 Firefox의 북마크를 자동으로 가져오더군요. 처음 사파리를 접해 보는거라, 신기한 부분이 많습니다. 주소창에 주소를 적다보면, 북마크에 있는 주소들이 검색되어 나옵니다. :) 내장된 RSS도 직접 보니 감회가 새롭습니다. Customizing Toolbar 창에서 툴 아이콘들을 움직여 보면, 역시 애플답다는 느낌이 절로 옵니다.

하지만, (좀 더 가지고 놀아봐야 알 수 있겠습니다..) 지금 당장 다른 브라우져를 다 졉고, 사파리 쓸 수는 없을것 같습니다. :)

정식 버젼이 좀 더 괜찮게 나온다면, 적어도 FF 를 사파리 모양을 꾸미는 짓 따위는 하지 않아도 될 듯 합니다. 뭐 아무튼 신기한 장난감이 하나 생겼어요. (역시 지금까진 장난감 그 이상도 그 이하도 아닌 수준.. ^^)