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 위 내용과 관련된 정보를 알고 계시거나, 혹시 제가 잘못 알고 있는 사항이 있다면 알려주시면 감사하겠습니다!

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

 

크롬이 빠르다는 거야?

크롬보다 빠른 배송기사 아저씨는 어쩔거임? :p

 

구글 크롬(chrome) 베타 30분 사용기.

첫느낌은 상당히 좋습니다. :) 뭐 구글에서 내 놓는 거니까, 피카사(Picasa) 만큼만 되도 좋겠다고 생각했었죠. 이 브라우저, 저 브라우저에서 느꼈던 장점들이 하나로 모아진 느낌입니다. 자세한 리뷰들이야 넘쳐 흘러서 딱히 더 할 말은 없고...
구글 크롬 정말 물건입니다!! by 웹초보
구글 차세대 웹 브라우저 구글 크롬 0.2.149.27 by 불타는여우
기타등등...

hi8ar.net 크롬테스트

hi8ar.net도 잘 나와요. :)

아무튼, 눈부시게 빠릅니다! 지금까지 세상에서 제일 빠른 브라우저는 오페라(Opera)라고 생각했었는데, 이젠 그 생각도 바꿔야겠군요.. 브라우저 하단의 '상태표시줄'이 없고, 필요할때만 살짝 살짝 보이는 게 맘에 듭니다. 개인적인 견해겠지만.... 페이지로딩에 있어 파이어폭스(Firefox)나 오페라가 좀 투박하고 거친 느낌이라면, 크롬은 사파리(Safari)만큼이나 아주 부드럽습니다. 아마도 사파리와 같은 엔진인 웹킷(Webkit)을 사용해서 그런지 사파리와  많이 닮은 느낌입니다. Input form에 노랗게 포커스 효과가 나타난다거나, 댓글 따위를 적는 Textarea의 크기를 마음대로 늘였다 줄였다 할수 있는 것들 말이죠. :) 그렇지만 사파리의 렌더링과는 미세하게 다른것 같습니다..

고정폭 글꼴 13pt
글쓰기창에서 글꼴이 너무 작게 나오는 이유는, 고정폭 글꼴이 13pt 로 지정되어 있기 때문입니다. 16pt 로 지정하시면 다른브라우저와 동일해 지더군요. 그외 팝업창이 조막만하게 뜬다거나, 이유없이 하드디스크를 스왑한다거나.. 텍스트큐브 위지윅에디터가 안 된다거나.. 기타등등의 문제점들이 보이기도 하지만... 아직 0.2대의 버젼이니까요. :)

이것저것 열어두고 글을 적다 보니 크롬을 강제로 종료할일이 생겼는데.. 뜻밖의 메시지를 뿌려주는군요.

강제 종료시 에러 메시지

귀여운 브라우저 입니다. :)