IE에서 인식하는 CSS만 존재하는 이유는 무엇입니까?

최근 몇 년 동안 브라우저 기술이 지속적으로 업데이트되고 업그레이드되면서 웹 프런트엔드 개발이 점점 더 편리해지고 개방화되었습니다. 그러나 새로운 웹 기술을 효율적으로 처리할 수 없는 일부 오래된 브라우저가 여전히 있습니다.

가장 자주 언급되는 문제 중 하나는 IE(Internet Explorer) 브라우저만이 CSS 속성과 선택기를 구체적으로 처리한다는 것입니다. 이러한 CSS 스타일은 IE 브라우저에서만 작동하므로 "IE 전용 CSS"라고 합니다.

이 글에서는 IE에서만 인식되는 CSS 속성과 선택기에 대해 논의하고, 이러한 속성이 존재하는 이유와 최신 웹 개발에서 이를 처리하는 방법을 살펴보겠습니다.

1. IE에서는 왜 CSS만 인식하나요?

웹 프런트엔드 개발 초기에 IE는 가장 인기 있는 브라우저 중 하나였습니다. 당시 개발자는 IE 관련 CSS 스타일을 사용하여 웹 사이트가 IE에서 올바르게 표시되도록 했습니다.

시간이 지남에 따라 Chrome, Safari, Firefox 등 다른 브라우저가 인기를 얻었으며 모두 새로운 CSS 속성과 선택기를 지원하기 시작하여 개발자가 웹사이트의 모양과 느낌을 더 많이 제어할 수 있게 되었습니다. 그러나 Internet Explorer는 폐기된 것으로 보이며 개발자는 IE에서 사이트가 제대로 작동하도록 하기 위해 이전 CSS 스타일을 계속 사용해야 했습니다.

IE에서 인식하는 CSS 속성과 선택기는 당시 개발자들이 문제를 해결하기 위한 임시방편으로 여겨질 수 있었지만 이제는 개발자들에게 문제가 되었습니다.

2. IE에서만 인식되는 CSS 속성

다음은 IE에서만 인식되는 일부 CSS 속성입니다. 이러한 속성은 더 이상 사용되지 않으며 개발자는 이러한 속성을 사용하지 않도록 해야 합니다.

2.1.

필터 속성은 Internet Explorer에서만 인식되는 CSS 속성으로 흐림, 빛, 그림자 등 하나 이상의 그래픽 효과를 적용하는 데 사용됩니다. 이러한 효과는 다른 브라우저에서도 사용할 수 있는 CSS 필터 기능을 통해 얻을 수 있습니다.

그러나 IE 8 및 IE 9 브라우저에서는 필터 속성을 사용하여 다른 브라우저에서는 불가능한 여러 효과를 적용할 수 있습니다. 예:

.div {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000');
    filter:alpha(opacity=50);
}

여기의 필터 속성은 두 가지 효과를 적용합니다. 하나는 그라데이션 배경이고 다른 하나는 불투명도입니다. IE 8 및 IE 9 브라우저에서는 두 효과가 모두 작동하지만 다른 브라우저에서는 첫 번째 효과만 적용됩니다.

그래서 IE 8, IE 9 브라우저에서 필터 효과를 사용해야 한다면 필터 속성을 사용해야 하지만, 다른 브라우저의 필터 효과는 CSS 필터 기능을 사용해야 합니다.

2.2. -ms-interpolation-mode 속성

-ms-interpolation-mode 속성은 IE 브라우저에서만 인식되는 CSS 속성으로, 이미지의 렌더링 방식을 제어하는 ​​데 사용됩니다. 가장 가까운 이웃, 쌍입방 또는 쌍선형 값을 취할 수 있으며, 이는 이미지 품질을 향상시키거나 손상시킬 수 있습니다.

그러나 이 CSS 속성은 IE 8 브라우저에서만 유용하며 다른 브라우저에서는 이를 무시합니다. 최신 웹 개발에서는 일반적으로 더 이상 이 속성을 사용할 필요가 없습니다. 새로운 CSS 기술이 이미지 렌더링 방법을 더 효과적으로 제어할 수 있기 때문입니다.

2.3.writing-mode 속성

writing-mode 속성은 IE 브라우저에서만 인식되는 CSS 속성으로 페이지 내 텍스트 방향을 변경하는 데 사용됩니다. 위에서 아래 또는 왼쪽에서 오른쪽 방향으로 설정할 수 있으며, 텍스트 방향을 세로 또는 가로로 설정할 수도 있습니다.

그러나 이 CSS 속성은 다른 브라우저에서는 작동하지 않습니다. 최신 웹 개발에서는 쓰기 모드 속성 대신 새로운 Flexbox 및 그리드 레이아웃 기술을 사용하는 것이 좋습니다.

3. IE에서만 인식되는 CSS 선택기

다음은 IE에서만 인식되는 일부 CSS 선택기이므로 개발자는 이러한 선택기를 사용하지 않도록 해야 합니다.

3.1.

HTML 선택기는 Internet Explorer에서만 인식되는 CSS 선택기이며 요소 선택 시 HTML 루트 요소와 일치하는 데 사용됩니다. 이 선택기에서 "*" 기호는 모든 요소를 ​​나타냅니다.

• 예:

* html body {
    font-size: 14px;
}

이는 이 CSS 스타일이 HTML 루트 요소 아래의 모든 본문 요소에 적용된다는 의미입니다.

그러나 이 선택기는 다른 브라우저에서는 지원되지 않지만 일반 하위 선택기를 사용하면 동일한 효과를 얻을 수 있습니다.

3.2. :first-child 선택자

: 첫 번째 하위 선택자는 IE 브라우저에서만 인식되는 CSS 선택자이며 요소의 첫 번째 하위 요소를 선택하는 데 사용됩니다.

예:

div:first-child {
    font-size: 16px;
}

이는 이 CSS 스타일이 상위 요소 아래의 첫 번째 하위 요소인 모든 Div 요소에 적용된다는 의미입니다.

그러나 IE 7 이하에서는 이 선택자가 의사 요소인 :first-child와 다릅니다. IE 7 이하에서는 이 선택기가 첫 번째 하위 요소만 선택하는 반면, 다른 브라우저에서는 첫 번째 하위 요소를 선택합니다.

따라서 최신 웹 개발에서는 이 선택기 대신 하위 선택기인 first-child를 사용하는 것이 좋습니다.

4. IE에서만 인식되는 CSS는 어떻게 처리하나요?

IE에서만 인식되는 CSS 속성 및 선택기는 최신 웹 개발에서는 덜 일반적이지만 IE 8 및 IE 9와 같은 이전 브라우저에서는 여전히 유용할 수 있습니다.

웹사이트가 이러한 이전 브라우저에서 올바르게 표시되도록 하기 위해 개발자는 조건부 주석을 사용하여 다양한 IE 브라우저에 다양한 CSS 스타일을 제공할 수 있습니다.

예를 들어 IE 8 및 IE 9 브라우저에 특정 CSS 스타일을 제공하는 조건부 주석은 다음과 같습니다.

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
 
<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

在这里，如果浏览器是IE 8或IE 9，则加载ie8.css或ie9.css。这使开发人员可以针对不同的浏览器提供不同的CSS样式。

5. 结论

只有IE识别的CSS属性和选择器在现代Web开发中已过时，但仍然有用于旧的IE浏览器。开发人员应该避免使用它们，并使用现代的CSS技术来实现相同的效果。

如果确实需要在旧版本的IE浏览器中使用这些CSS属性和选择器，则可以使用条件注释和IE特定的CSS样式来为不同的浏览器提供不同的CSS效果。

在Web开发中，我们必须始终记住，我们的目标是提供良好的用户体验，为此，我们应该遵循最佳实践，为不同的浏览器提供最佳的CSS样式。通过了解只有IE识别的CSS，我们可以更好地处理它们，确保我们的网站在所有浏览器中都能正确显示。

위 내용은 IE에서 인식하는 CSS만 존재하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!