polyfill 검색 결과

해당 글 14건

IE7에서 :before, :after 선택자와 content 속성 대체방안

IE7을 고려해야하는 페이지를 제작하는 경우, :before 나 :after 와 같은 가상 선택자를 지원하지 않아 애를 먹곤 합니다. 설상가상으로 content 속성까지 지원하지 않지요. 이에 대한 대체방안을 모색해봅니다. :before, :after 선택자 대체방안 IE7에서는 :before 와 :after 가상 선택자를 대체하기 위해서 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법이 사용된다. 아래의 예시와 같이, 이 표현식은 자바스크립트와 같은 방식으로 요소를 생성하고 있다. .example:before, .example .ie-before { display: block; width: 100px; height: 50px; } .example { *zoom: expression( this.ru..
웹개발론/크로스브라우징 2015. 10. 26. 11:00

poly-checked - :checked 의사 클래스 크로스브라우징

:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다. poly-checked 소개 IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다. HOME poly-checked DEMO 라이브 데모 poly-checked 사용법 jQuery 1.7 이상의 버전이 필요하며, IE 조건부 주석을 이용하여 이를 삽입한다. 스크립트가 삽입되기 이전에 모든 스타일시트(CSS) 파일이 삽입되어야 한다. poly-check..
웹개발론/크로스브라우징 2015. 8. 3. 11:00

input 이벤트 감지 크로스브라우징

폼 검증을 위해 값의 변경을 감지한 후, 이벤트를 수신하여 유효성 검증을 하고 오류 메세지를 표시하는 작업에 열을 올리고 있었습니다. 실시간으로 변경되는 값을 수신하고 싶었고 관련하여 이벤트의 종류와 기능을 살펴보다가 어느정도 결론에 도달하여 내용을 공유합니다. 폼 검증시 사용되는 이벤트 기본적으로 폼 검증시에는 해당 input 필드에 값이 입력되고 포커스가 해제되면 발생하는 blur이벤트를 많이 사용한다. 대부분의 경우 유효한 방법이지만, 작성이 완료된 필드에 다시 돌아가는 일은 사용자 입장에서 여간 귀찮은 일이 아닐수 없다. 경우에 따라서는 키가 입력되는 순간 순간에 유효성을 검증해야 하는 경우도 생긴다. 아래의 예처럼 말이다. 실시간 이벤트 감지 사례 회원가입 폼에 대한 유효성 검증중에 비밀번호와 ..
웹개발론/크로스브라우징 2015. 7. 20. 14:42

Placeholders.js - 폼힌트 크로스브라우징

IE9 이하에서 placeholder 속성 적용을 위한 대체방안 두번째 글입니다. Placeholders.js 소개 HTML5 placeholder 속성을 위한 자바스크립트 폴리필이다. 가볍고 모든 브라우저에서 사용가능하다. HOME http://jamesallardice.github.io/Placeholders.js REPO https://github.com/jamesallardice/Placeholders.js input 요소와 textarea 요소에 적용된다. 브라우저의 기본적인(native)스타일을 렌더링하도록 노력하며, 스타일을 수정 가능하도록 placeholdersjs 라는 클래스를 추가한다. 기본적으로 placeholder 속성을 지원하는 브라우저에는 영향을 미치지 않는다. IE6+ 이상에서..
웹개발론/크로스브라우징 2015. 5. 22. 15:00

HTML5 Placeholder jQuery Plugin - 폼힌트 크로스브라우징

HTML5에 새로 추가된 속성인 placeholder라는 속성을 이용하여 input 요소에 힌트를 제공할 수 있습니다. IE9 이하에서는 제대로 작동하지 않기 때문에 이를 극복하기 위해서 몇가지 대체방안을 살펴봅니다. 그 중 첫번째 글입니다. HTML5 Placeholder jQuery Plugin 소개 IE9 이하 버전에서 placeholder를 구현하기 위해 jQuery로 만든 플러그인이다. REPO https://github.com/mathiasbynens/jquery-placeholder DEMO Demo & Examples HTML5 Placeholder jQuery Plugin 사용법 HTML에서 사용할 폼 컨트롤을 생성한다. jQuery 라이브러리와 HTML5 Placeholder jQuer..
웹개발론/크로스브라우징 2015. 5. 22. 12:00

Modernizr - 브라우저 기능검사

기존에는 브라우저의 호환성을 유지하기 위해 browser sniffing 기법(자바스크립트의 navigator.userAgent 프로퍼티를 이용하는 방식)을 사용했습니다. 그러나 다양한 디바이스가 등장하고 HTML5와 CSS3가 웹표준으로 자리매김을 하고 있는 상황에서 브라우저마다 HTML5와 CSS3의 구현정도가 달라 기존의 browser sniffing 방식으로는 이러한 브라우저간의 호환성을 유지한다는 것은 불가능하게 되어 대체방안으로 Modernizr를 많이 사용하고 있습니다. Modernizr 소개 Modernizr는 오픈소스 자바스크립트 라이브러리로, HTML5와 CSS3의 명세에 정의된 요소와 속성들에 대한 지원여부를 점검하는 방식으로 기존의 방식보다 더 정확한 분류가 가능하다. HOME Mo..
웹개발론/크로스브라우징 2015. 5. 21. 17:00

Respond.js - 미디어쿼리(Media Query) 크로스브라우징

부트스트랩 및 많은 웹 개발에서 사용되고 있는 Respond.js에 대하여 알아봅니다. Respond.js 소개 IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다. REPO https://github.com/scottjehl/Respond/ DEMO 데모보기 Respond.js 사용법 IE8 이하 버전에서만 사용하도록 조건부 주석문을 사용한다. 시작과 동시에 로딩이 되도록 CDN/X-Domain Setup Respond.js는 AJAX를 통해 CSS의 사본을 요청하는 방식으로 작..
웹개발론/크로스브라우징 2015. 5. 21. 00:00

Font Smoothing Detection - 클리어타입 활성화 여부

Font Smoothing Detection 소개 간단히 말하자면 윈도우로 치면 클리어타입같은 효과가 활성화 되어 있는지 아닌지를 판단해서 사용자들이 웹페이지에 방문했을때 깨어진 글꼴 표기를 방지하는 것이다. MAC의 OSX는 미려한 글자를 보여주지만 XP와 같은 구버전의 운영체제에서는 위 그림과 같이 나타날수 있다. HOME Font Smoothing Detection js 라이브러리를 이용해 이를 Modernizr처럼 html의 클래스에 활성화/비활성화 여부를 나타낼 수 있다. canvas를 이용해서 글꼴을 부드럽게 만드는지 그렇지 않은지를 감지하는 기법이다. 클리어타입을 사용하긴 하지만 글꼴이 지나치게 뿌옇게 나오는 경우를 탐지하기 위해서는 사용할 수는 없다. 글꼴 처리 활성화 상태를 Moderni..
웹개발론/크로스브라우징 2015. 5. 20. 17:00

Box Sizing Polyfill - 박스모델 크로스브라우징

최근에는 박스모델의 계산을 손쉽게 도와주는 box-sizing: border-box를 많이 사용하는데 이는 IE8 이상에서만 작동합니다. 구형 브라우저에서 이를 지원하는 방법에 대하여 알아봅니다. Box Sizing Polyfill 소개 IE7 이하버전에서 CSS의 box-sizing을 구현하기 위해서 필요한 폴리필이다. REPO https://github.com/Schepp/box-sizing-polyfill Box Sizing Polyfill 사용법 boxsizing.htc 파일을 서버에 올리고 IE7 이하 버전에서만 적용하기 위해 코드를 추가한다. ie.css 파일을 작성한다. * { behavior: url(경로/boxsizing.htc); } 경로에 주의해야 하는데 HTML 파일의 상대경로로 작..
웹개발론/크로스브라우징 2015. 5. 20. 12:00

CSS3PIE - CSS3 속성 크로스브라우징

둥근 모서리, 부드러운 그림자, 그라데이션을 구형 브라우저에서 구현해주는 PIE에 대하여 알아봅니다. CSS3PIE 소개 PIE는 몇가지 유용한 CSS 장식 속성들을 IE6~9에서 렌더링 될 수 있게 만든다. HOME http://css3pie.com DOWN Download the PIE distribution PIE가 지원하는 속성 border-radius box-shadow border-image multiple background images linear-gradient as background image 또한, PIE는 이미 기본적으로 다른 기능을 지원하는 IE9에 border-image 속성과 linear-gradient 속성에 대한 지원을 추가한다. CSS3PIE 사용법 위의 다운로드를 이용..
웹개발론/크로스브라우징 2015. 5. 19. 17:00

Selectivizr - CSS3 선택자 크로스브라우징

구형 브라우저에서 CSS3 선택자 사용을 위한 크로스브라우징을 알아봅니다. Selectivizr 소개 selectivizr는 CSS3 가상클래스를 에뮬레이트하여 IE6~8에도 해당요소에 적용된 스타일을 볼 수 있게 하는 자바스크립트 유틸리티이다. 해당 페이지에 selectivizr 스크립트를 인클루드 시키기만 하면 나머진 자동으로 처리된다. HOME http://selectivizr.com/ IE의 선택자 엔진을 향상 Internet Explorer 구버전에도 19개의 CSS3 가상클래스와 2개의 가상요소, 그리고 모든 속성 선택자의 지원을 추가하였다. 또한 브라우저의 네이티브 선택자들의 몇 가지 문제를 해결하였다. 자바스크립트 지식 없어도 됨 이 스크립트는 자동으로 처리되기 때문에 굳이 자바스크립트 지..
웹개발론/크로스브라우징 2015. 5. 19. 12:00

IE7.js - HTML5 요소 및 CSS 선택자 크로스브라우징

IE7-js 소개 딘 에드워드의 ie7-js는 자바스크립트 라이브러리로서, 구 버전의 IE에서 HTML5 태그는 물론 일부 CSS3 선택자도 인식하게 해준다. 또한 IE6 이하에서 PNG의 투명효과를 지원하지 않는 문제를 해결한다. 자식 선택자, 인접 선택자, 구조 선택자, 속성 선택자 등의 css선택자 max-width, min-height를 비롯한 css속성 png 그림 파일의 파일 투명도 더블마진 버그, 까꿍놀이 버그 같은 흔한 버그를 관련 버그 교정 라이브러리 현재는 업데이트되어 ie9.js까지 제공한다.각각의 버전들이 지원하는 것들을 살펴보려면 Demo를 확인하자. HOME http://code.google.com/p/ie7-js/ DOC Using the IE7 Script IE7-js 사용법..
웹개발론/크로스브라우징 2015. 5. 18. 17:00

HTML5 Shiv - HTML5 요소 크로스브라우징

html5shiv 소개 존 레식(John Resig)이 처음 개발하고 레미샤프(Remi Sharp)가 완성한(? 정확하지 않음) 자바스크립트로서, 새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리이다. HOME https://github.com/afarkas/html5shiv 위의 GitHub 저장소에 들르면 자세한 설명과 다운로드가 가능한데(물론 영문) 아래에서 필요한 내용을 간단히 정리한다. html5shiv.js 간단히 다운로드 받은 파일을 설명한다. 기본적인 createElement() 기술과 IE6~8에서 기술 적용을 위해 document.createElement와 document.crea..
웹개발론/크로스브라우징 2015. 5. 18. 12:00

폴리필(polyfill)

Polyfill, Shims, Fallback이란 용어들을 들어보셨을 겁니다. 용어는 틀려도 각각의 목적은 브라우저별로 다름없는 기능 구현이 목적입니다. 즉, 크로스 브라우징을 염두한 것입니다. 폴리필이란? 폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다. HTML5 Cross Browser Polyfills Modernizr 측에서 정리하여 제공하고 있는 각종 폴리필 목록을 참고하면 원하는 기술을 선택하는데 도움이 될 것이다. 필자가 자주쓰는 것들을 아래와 같다. html5shiv : HTML5의 섹셔닝 요소(예: , )를 지원하지 않는..
웹개발론/크로스브라우징 2015. 5. 15. 17:00