DEV/Tips-Windows-IE11 5

[CSS] IE 에만 적용하기 / CSS only for IE

시스템 기본 폰트를 사용한다면 같은 글자수여도 맥의 가로폭과 윈도우의 가로폭이 다르다. 이럴때 흔히 'IE만 자간 조정 가능한가요?' 라는 질문을 받게 되는데, 쉽게 생각하기엔 userAgent 체크를 해서 해당 브라우저가 IE인지 아닌지 판단하고 IE 일때 특정 클래스를 넣어서 블라블라~ 이런 식으로 의식의 흐름이 닿아서 '아... 굳이...?' 이런 생각이 들었다. 그러다 며칠전에 특정 브라우저일때를 미디어쿼리로 판단하는 핵을 봤던게 생각이 나서 IE도 있을 것 같아서 검색을 해봤다. 역시나 있었다. 나는 일을 시작한 이래로 쭉 글로벌 서비스 위주로만 일을 했어서 사실 IE 대응이 능숙하진 않다. 그래서 다들 이미 알고 있을 수도 있지만 이렇게 새롭게 알아가는 것들이 생긴다. @media all an..

[윈도우] Windows 10 Mail (Outlook) 특이사항

지원 여부 확인 방법 https://www.caniemail.com/ caniuse 처럼 이메일에서 사용가능한 css 속성을 확인해 볼 수 있는 사이트가 있다. https://www.campaignmonitor.com/css/ 최근에 찾은 사이트인데 caniuse 보다 훨씬 더 좋은 것 같다. CSS Support Guide for Email Clients A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet. www.campaignmonitor.com Email Client Support Scoreboard 최하위 지원률을 보여주는 windows여.... ..

[ie11] 스크롤 이벤트가 안 먹혀요 scrollY (X) → pageYOffset (O)

가장 빈번하게 오는 디자인 요청사항 중 하나가 바로 "스크롤 시 GNB 색상을 바꿔주세요!" 이다. 보통 처음에는 투명색이었다가 스크롤 시 컨텐츠와 구분이 되도록 GNB에 배경색을 채워 넣는 형태이다. IE 에서 테스트 하는데 제대로 동작이 되지 않아서 원인을 찾아봤더니 scrollY의 호환성 이슈였다. Sample Code let last_known_scroll_position = 0; let ticking = false; function doSomething(scroll_pos) { if(scroll_pos > 10) { document.querySelector('.nav').classList.add('is-scroll'); } else { document.querySelector('.nav').cl..

[ie11] 인터넷 익스플로러에서 grid 사용하기

flex는 이제 현업에서 자주 쓰는데 grid를 현업에서 사용하는 경험이 없었습니다. 현업에 적용하지 않으면 사실 머리속에 자리잡기가 어려운 것 같아요. 그래서 이번에 블로그 디자인 커스텀 하면서 그리드를 사용해 보기로 마음먹었습니다. 안 되는 것도 물론 많지만 기본적은 것들은 어느 정도 fallback 코드로 IE에서 적용되게 할 수 있었습니다. 먼저 읽어보면 좋을 글 아래 글을 정말로 강추합니다!!! 사실 여기에 거의 grid 의 모든 것이 담겨져 있어요. 저도 개념잡을 때 정말 많이 참고했답니다. 저는 가장 핵심적이고 기초적인 레이아웃에 대해서만 정리해볼까 합니다. 좀 더 자세하고 전반적인 내용은 아래글을 참고해주세요~ 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들..

[ie11] flex시 margin: auto; 적용되지 않는 이유

예제) Flex를 활용한 푸터 위치잡기 Header Footer 흔히 flex를 사용할 때, 위의 예제 코드처럼 margin-top: auto; 를 사용하면 푸터가 바닥에 쉽게 붙일 수 있다. 문제) IE에서는 min-height 값만으로는 적용불가 그런데 ie에서 제대로 적용되지 않는 margin: auto; 값을 제대로 표현해주지 않을 때가 있다. 부모 요소의 높이를 min-height로 잡는 경우에는 적용되지 않는 것을 확인할 수 있다. 해결방법) min-height 보다 작은 값의 height 값을 지정해준다. Header Footer 제일 작은 사이즈의 핸드폰 해상도도 320x568 이기 때문에 height는 임의로 500px을 넣었다. (사실 코드 동작은 height: 0; 만 넣어도 된다.)..

DEV/Tips-Windows-IE11 2020.07.09 (2)
반응형