점진적 향상을 사용하여 Internet Explorer의 스타일 설정
8776 단어 csslegacyprogressiveenhancement
Internet Explorer 11 지원 필요
불행하게도, 인터넷 익스플로러는 기업 소프트웨어 브라우저 시장에서 여전히 자신이 저주받은 샤오리키를 실현했다. 왜냐하면, 이것은 여전히 Active Directory 인증에 최상의 지원을 제공하기 때문이다.이것은 아직도 많은 사무 환경이 인터넷 익스플로러를 전문적으로 지원하는 녹지 웹 응용 프로그램을 작성하고 있다는 것을 의미한다.만약 당신이 기업에서 일자리를 신청한다면, 미래의 채용 관리자는 인터넷 탐색기를 기본 브라우저로 사용할 가능성이 높다. 왜냐하면 이것은 그들이 시간표를 방문하는 유일한 경로이기 때문이다.
이런 점을 감안하여 인터넷 익스플로러에서 내 사이트를 열어 이 각도에서 그것이 어떤 모습인지 살펴보자.
네.문제가 있습니다.그것은 CSS를 아직 배우지 못한 사람이 쓴 사이트처럼 보인다.Internet Explorer가 적용할 수 있는 소수의 스타일 중 많은 스타일이 제대로 적용되지 않고 텍스트를 차단하는 데 남는다.
Internet Explorer 11의 최소 요구 사항 설정
만약 내가 인터넷 익스플로러를 목표로 한다면, 나는 나의 모든 스타일시트를 거의 완전히 다시 써야 하지만, 반드시 이렇게 하려고 하는 것은 아니다.이상적인 상황에서 나는 일이 이렇게 발전하기를 바란다.
점차적으로 향상: 이론과 실천
점진적 강화는 전통적인 지원의 세 번째 방식으로 개발자는 플랫폼을 겨냥하지도 않고 무시하지도 않는다.반면에 개발자는 최소한의 기능을 가진 플랫폼을 지원하고 목표가 명확한 현대 플랫폼에서 점점 더 좋은 체험을 제공한다.
Internet Explorer에서 작업하기 전에 프로젝트를 안정적인 버전으로 업그레이드하는 것이 좋습니다. 두 가지 이유는 다음과 같습니다.
Internet Explorer의 취약점 및 이점을 활용하는 방법
Internet Explorer의 웹 사이트에는 주로 두 가지 질문이 있습니다.
하드 값으로 CSS 변수 메우기
나는 먼저 CSS 변수를 처리할 것이다. 왜냐하면 이것은 내가 인터넷 익스플로러 사이트에서 가장 주의할 만한 문제이기 때문이다.Internet Explorer에서 CSS 변수를 지원하지 않기 때문에 스타일시트를 수동으로 보고 변수를 사용하는 행 앞의 행에 하드 값을 입력하여 지원되는 변수의 브라우저에서 하드 값이 무시되도록 해야 합니다.
예컨대 사이트.css
h2, h3, h4
{
color: #0f0;
color: var(--color-theme-highlight);
}
근데 왜죠?
만약 내가 하드코딩 값으로 모든 CSS 변수를 추적해야 한다면, 왜 그것들을 보존하는 데 신경을 써야 하는지 알고 싶을 것이다.결국, 만약 내가 변수에 저장된 값을 변경한다면, 나는 지금 모든 하드코딩의 값을 변경해야 한다.
그러나 IE를 겨냥하는 것은 제 사이트의 주요 목표가 아닙니다. 저는 최소한의 보조 지원만 제공할 뿐입니다.네, 이상적인 상황에서 만약에 제가
--color-theme-highlight의 값을 변경하기로 결정한다면 저도 들어가서 하드코딩의 값을 변경해야 합니다. 그러나 그 중 하나 또는 두 개의 값을 일정 시간 안에 잃어버리면 그것도 그리 대단한 것은 아닙니다.비록 이것은 직감과 상반되지만, 나는 하드코딩의 값과 변수를 보존한다. 왜냐하면 이것은 나에게 변수의 유지보수성과 읽기 가능성을 제공하고, IE 사용자에게 최소한의 지원을 제공하기 때문이다.
Internet Explorer에서 작동하지 않는 항목 숨기기
나의 다른 대부분의 문제는 플렉스박스에 대한 나의 사랑으로 귀결된다. 나는 그것들을 포기하지 않을 것이다.반대로, 나의 용례에 대해, 나는 단지 나의 사이트에서 인터넷 익스플로러가 정확하게 표시하지 못하는 부분을 없애고 싶을 뿐이다.
다음과 같이 CSS 변수를 대략적인 피쳐 체크로 사용할 수 있습니다.
:root
{
/* Internet Explorer compatibility hacks */
--display-block: block;
}
.footer
{
background-color: #070;
background-color: var(--color-theme);
box-shadow: 0 0 15px #000;
box-shadow: 0 0 15px var(--color-shade-well);
display: none;
display: var(--display-block);
z-index: 2;
}
display: none; 웹 페이지의 꼬릿말을 숨기지만, CSS 변수를 지원하는 브라우저는 CSS 변수를 사용하여 덮어씁니다.이것은 약간 해커이지만, 괜찮다. 만약 그것이 고장나면, 우리는 인터넷 익스플로러를 사용하는 극소수의 사용자들에게 불편을 줄 뿐이기 때문이다.물론, 결국, 우리가 가장 좋아하는 해결 방안은 우리의 인터넷 익스플로러 사용자를 전환하는 것이다.우리들은 그들이 이렇게 하도록 열심히 격려합시다.
브라우저 업그레이드를 권장하는 메시지 표시
여기는 별다른 의외의 일이 없다.나는 단지 CSS 변수 hack을 다시 사용했을 뿐이다. 이렇게 하면 나의 추악한 주황색 경고 메시지는 CSS 변수를 지원하지 않는 브라우저에만 나타난다.
.div-browser-warning
{
background-color: #FF8C00;
color: #000;
display: block;
display: var(--display-none);
padding: 5pt;
}
.p-browser-warning { color: #000; }
.p-browser-warning a
{
color: #000;
text-decoration: underline;
}
<body>
<div class="container">
<div class="div-browser-warning">
<p class="p-browser-warning">Welcome! We notice you're
using an outdated browser, which
will result in a degraded experience on this site. Please
consider
<a href="https://www.mozilla.org/en-US/firefox/new/">a
modern, fully supported browser.</a>
</p>
</div>
<header class="flex-row header padded">
요컨대
이 점에서 최소한의 노력을 기울이고 구조적인 변화가 없으면 제 사이트는 인터넷 익스플로러에서 볼 수 있습니다. 제 인터넷 익스플로러 사용자들은 이제 더 좋은 사용자 체험을 얻을 수 있는 방법을 알고 있습니다.저는 점진적인 개선을 계속할 수 있지만 현재 저는 이런 절충 방안에 대해 매우 만족합니다. 저는 이 글이 당신에게 점진적인 강화 이론을 어떻게 응용하고 당신이 선택한 플랫폼에 남아 있는 사용자와 화해할 수 있는 아이디어를 제공할 수 있기를 바랍니다.
Reference
이 문제에 관하여(점진적 향상을 사용하여 Internet Explorer의 스타일 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/webbureaucrat/styling-for-internet-explorer-using-progressive-enhancement-330텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
