다들 크롬 56 대응준비는 하셨는지요?

§

chrome

크롬은 전세계에서 가장 많이 사용되는 브라우져 입니다. 전세계뿐만 아니라 한국에서도 현재 53% 가 넘는 시장점유율을 보여주고 있습니다.

출처: http://gs.statcounter.com/#browser_version_partially_combined-KR-monthly-201510-201610
출처: http://gs.statcounter.com/#browser_version_partially_combined-KR-monthly-201510-201610 출처: http://gs.statcounter.com/#browser_version_partially_combined-KR-monthly-201510-201610

내년 1월 부터 적용되기 시작하는 크롬56은 여러가지로 중요한 업데이트 입니다.

가장 주목할 부분이 HTTPS 프로토콜을 사용하지 않는 웹사이트에 대한 경고 문구 입니다.

웹사이트가 HTTP 인 경우 현재 크롬53버전에서는 단순히 느낌표로 표시되지만, 내년 1월 부터는 사이트가 보안상 위험하다는 경구문구가 추가 됩니다.

%ed%81%ac%eb%a1%ac56

그리고 빨간색으로 강조까지 할 예정입니다.

%ed%81%ac%eb%a1%ac56_https

이런 경고문구가 뜨면 사이트 방문자들은 불안을 느낄 수 밖에 없습니다.

고로 사장님 불호령이 떨어지기 전에 알아서 미리미리 사이트에 SSL 을 적용하는 개발자/직원이 현명한 사람이겠죠? ㅎㅎㅎ

또다른 특이사항은, 드디어 4년만에, css 의 sticky 가 적용된다는 점 입니다.

sticker-div

저는 이걸 무려 3년도 넘게 동안 기다렸습니다. ㅠㅠㅠㅠ

css 의 position: sticky; 는

페이지가 스크롤이 되는 position 에 따라 다른 성격을 지닐 수 있게 해주는 property 입니다.

말로 설명을 드려봐야 무슨 얘기야? 하실거고, jsfiddle 을 보여드립니다. (Result 탭을 누르시면 결과물을 보실 수 있습니다.)

자스 (javascript) 코드를 보시면 jQuery 를 사용했는데도 불구하고 얼마나 코딩이 길어지는지 쉽게 아실 수 있죠?

이건 약과고, 보통 이런 scroll event 를 제어하기 위해 흔히 사용되는 waypoints 플러그인 코드를 살펴보시면 기가막히실 겁니다.

https://github.com/imakewebthings/waypoints/blob/master/src/waypoint.js

position:sticky 이렇게 css 한줄이면 구사가능한걸 (현재 파폭이나 사파리 브라우져에서는 이 css 가 작동됩니다.) 구글에서 이 기능을 크롬 23에서 (4년전에) 없애 버리는 바람에 수많은 개발자들의 원성을 들었던 사연깊은 css 입니다.

구글 하고 파폭에서 지원을 해도, 결국 IE 에서 지원을 안하면 사용하기가 힘들죠.

http://caniuse.com/css-sticky/embed/

그래서 이 글을 읽는 분들께 부탁하나만 드립니다.

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621-position-sticky

이 주소로 가셔서 마소에게 이 position: sticky 를 IE 브라우져에서도 지원해 달라고 하는 투표에 참여해주실 것을 부탁드립니다. 한사람이 하나의 이메일 주소로 투표 3개까지 행사할 수 있습니다.

IE 에서 지원을 안하면, IE 브라우져에서만 저 무거운 자스 (javascript)를 스크립팅 해 넣으면 되지만, 몹시 번거스러운 일 입니다. 또 사이트 속도도 느려지구요.

감사합니다.

* 아, 플래시가 크롬56에서 완전히 제거 되는데, 그건 별로 중요한 내용이 아니라고 생각되서 언급하지 않았습니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , ,

카테고리: ,

Ω

9 Comments

  • codei says:

    지금이 54이고 다음이 55 인걸로 알고 있었는데… 56에 관한 정보는 어디서 확인 가능 한가요?

    그리고 저 sticky 기능은 js 로 구현하는거 공감 ㅜㅜ

    내가 왜 화면 길이를 계산하고, 실제 테스트해서 눈에 잘 들어오고 편한지도 테스트 하고 있어야 하는 거야! 라며 부들부들 거리며 JS 짜고 있노라면… 으….

    그냥 한방에 간단하게 알아서 해주는게 왜 없지? 하며 깊은 탄식을 보냈는데 꿀맛 프로퍼티가 등장 하는 군요.

    아 근데 헬조건은 IE….. A ㅏ.

    • Matthew says:

      크롬 정보는 크롬 블로그에서 보면 됩니다.

      http://bfy.tw/8fzY

      첫번째, 두번째, 세번째 링크 확인하시면 됩니다. ㅎㅎ

      IE 도 희망이 있습니다.

      아마 내년이면 적용할거에요. 그래서 투표 부탁드리는거구요.

  • Estoque says:

    position:sticky 이거 예전에 한창 CSS 배울때 곧 정식으로 적용될것 목록에 있었는데 드디어…

    이제 sticky 배너가 범람하는 시대가 오지 않을까 합니다. (특히 핼조선…)

    그나저나 얼마전에 학교 도서관에서 IE9를 쓰니 왠만한 사이트들이 다 깨져서 (레이저 홈페이지) 크롬을 깔려고 했는데 PC키퍼로 막아놓았더라고요

    우회할 방법은 있지만 그냥 10분 쓰고 말거라서 걍 포기 했던 기억이 있네요

    • Matthew says:

      저는 position: sticky; 로 레이아웃까지 다 뽑아놓고 다음 버전에서는 적용하겠지 하겠지 이러면서 기다린게 3년이 넘었습니다. ㅋㅋㅋ

      어짜피 처음부터 IE 는 sticky banner 를 구사하는 스크립트를 따로 적용할 계산으로 만들어 놓은거였거든요.

      그래서 크롬만 sticky 를 적용해 주길 기다린거죠. ㅠㅠㅠㅠ

      그런데 너무 시간이 많이 지나가 버려서 그 레이아웃은 이제 써먹지도 못합니다. 아.. 화가 납니다!! ㅋㅋㅋ

  • jtmoon says:

    이제 더 이상 자스 및 제이쿼리로 쌩 헛짓할 필요가 없겠군요 ㅋㅋㅋ

Leave a Reply

Your email address will not be published. Required fields are marked *