잡다한 개발 블로그

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) 클라이언트별로 사용 가능한 스타일(스타일 관련 엘리먼트, CSS 선택자, CSS 속성)에 대한 가이드 제공

mydevice.io : web devices capabilities Mobile devices, in Responsive Web Design, relate to a core value which is the value of CSS width or ("device-width"), in CSS Device Independant Pixels, which depends both of the browser and user zoom settings. Choose your weapon : www.mydevice.io 접속한 디바이스 및 다른 메이저 디바이스 스크린 정보 제공 사이트. 현재 디바이스 정보 스크린 메트릭(Screen metrics): 스크린 크기, 픽셀 레티오(pixel ratio), 해상도(resol..

CSS Triggers @PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates csstriggers.com CSS 속성이 브라우저 별로 렌더링 단계에 어느 부분을 트리거하는지 정보를 알려주는 사이트.

원문: Combining the Powers of SEM and BIO for Improving CSS Combining the Powers of SEM and BIO for Improving CSS | CSS-Tricks CSS is easy, some might argue, but that "easiness" can cause messy code. This is especially true through power of preprocessors like Sass or Less where, css-tricks.com CSS가 쉽다고 일부 사람들은 주장하겠지만, 오히려 그 “쉬움”이 코드를 지저분하게 할 수 있습니다. 특히 Sass나 Less와 같은 전처리기의 힘을 빌리면 지저분해지기 쉽습니다. 조심하지..

원문: The Fab Four technique to create Responsive Emails without Media Queries 미디어 쿼리 없이 반응형 이메일을 만드는 새로운 방법을 찾았습니다. 이 방법은 CSS calc()함수와 width, min-width, max-width 프로퍼티을 사용합니다. 저는 이 프로퍼티를 합쳐서 (CSS계 의) Fab Four라고 부르고 있습니다. 문제 반응형 이메일을 만드는 것은 어려운 일입니다. 모바일 이메일 클라이언트(Gmail, Yahoo, Outlook.com)가 미디어 쿼리를 지원하지 않기 때문에 특히 어렵습니다. 하이브리드 방식, Gmail 첫번째 전략, 미디어쿼리가 없는 반응형 이메일이 이런 상황에 대응하는 좋은 방법입니다. 저는 마지막 방법을 ..