| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- Flutter
- c# winform
- dart 언어
- github
- jupyter lab
- c언어
- C# delegate
- Python
- c# 윈폼
- HTML
- Algorithm
- Houdini
- vim
- c#
- 도커
- 다트 언어
- 플러터
- jupyter
- 포인터
- git
- c# 추상 클래스
- 유니티
- C++
- 구조체
- 깃
- gitlab
- docker
- C언어 포인터
- Unity
- Data Structure
- Today
- Total
nomad-programmer
[Programming/HTML|CSS] 브라우저 간의 차이를 메꿔주는 폴리필(polyfill) 본문
최신 브라우저라 하더라도 HTML5 스펙의 기능들이 어떤 브라우저에서는 되고, 어떤 브라우저에서는 안되는 것을 브라우저 파편화(browser fragmentation)이라고 한다.
이런 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위해 여러 가지 방법들을 동원하는데 이런 방법들을 통틀어 "심(shim)"이라고 부르며, "폴백(fallback)"이라 부르기도 한다.
html5shim.js도 shim의 일종이다.
https://github.com/aFarkas/html5shiv
aFarkas/html5shiv
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFarkas/html5shiv
github.com
폴리필(polyfill)은 파편화를 보이는 브라우저에 삽이하는 자바스크립트 소스로, 브라우저를 스스로 판별하여 해당 브라우저에 필요한 shim을 알아서 끼워 넣어준다.
개발되어 있는 폴리필들은 꽤 많다. 아래의 github링크를 참고하면 HTML5 크로스 브라우징을 위한 폴리필이나 심, 폴백을 한 눈에 볼 수 있다.
https://github.com/Modernizr/Modernizr/wiki
Modernizr/Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. - Modernizr/Modernizr
github.com
HTML5를 지원하는지 확인하려면?
Modernizr 사용법
Modernizr는 인터넷 익스플로러에서 시맨틱 태그를 사용할 수 있게 해주는 방법이 아니라, 사용하려고 하는 HTML 태그나 CSS 속성을 현재 브라우저에서 지원하는지 확인하고, 지원하지 않을 경우 또 다른 해결 방법을 제시할 수 있다.
예를 들어, HTML5의 새로운 태그인 <video> 태그를 지원하는지 확인하려면 다음과 같이 할 수 있다.
Modernizr: the feature detection library for HTML5/CSS3
What is Modernizr? It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.
modernizr.com
위의 링크에서 최신 버전의 라이브러리를 다운로드할 수 있고, 다운로드한 파일은 다음과 같이 페이지에 링크하면 바로 사용할 수 있다.
<head>
<script src="modernizr.min.js"></script>
</head>
'Programming > HTML|CSS' 카테고리의 다른 글
| [Programming/HTML|CSS] 많이 사용하는 StyleSheet 초기화 코드 (0) | 2020.12.18 |
|---|---|
| [Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정 (0) | 2020.08.11 |
| [Programming/HTML|CSS] 동위 선택자의 활용 예시 (0) | 2020.08.10 |
| [Programming/HTML|CSS] 웹 개발할 때 유용한 사이트 모음 (0) | 2020.08.10 |
| [Programming/HTML|CSS] 애니메이션 속성 (0) | 2020.08.07 |
