Osobne reguły CSS dla przeglądarki Internet Explorer
- Data publikacji
- Ostatnio edytowano
W tej części kursu CSS zapoznamy się ze sposobami definiowania reguł CSS, które zostaną rozpoznane tylko przez przeglądarkę Internet Explorer.
Dlaczego akurat Internet Explorer?
Ponieważ różne wcześniejsze wersje przeglądarki Internet Explorer miały problem z interpretowaniem różnych właściwości CSS oraz selektorów CSS, dlatego dla tych wersji przeglądarki Internet Explorer tworzyło się osobne reguły CSS, aby wszystko działało w miarę poprawnie.
W realnym świecie czasami robimy coś w drodze wyjątku, ponieważ w przeciwnym wypadku nasze działanie nie będzie miało pożądanego efektu, w danej sytuacji. Na przykład nauczyciel tłumacząc temat danej lekcji robi to dla całej grupy uczniów w ten sam sposób, jednak czasami nauczyciel musi ten sam temat wytłumaczyć w nieco inny sposób dla innych uczniów znajdujących się w tej samej grupie, dzięki czemu wszyscy uczniowie zrozumieją dany temat.
W wirtualnym świecie naszym uczniem, dla którego będziemy musieli wytłumaczyć pewne reguły CSS w nieco innym sposób, będzie przeglądarka Internet Explorer w różnych wersjach.
Ogólny wzór, który będzie nam potrzebny do utworzenia reguły CSS rozpoznawanej tylko przez wskazaną przez nas wersję przeglądarki Internet Explorer, został przedstawiony pod spodem:
<!--[if WARUNEK]>
ZAWARTOŚĆ
<![endif]-->
Wzór przedstawiony powyżej należy stosować tylko w samym dokumencie HTML, nie można go stosować, np. w pliku CSS.
Jako "ZAWARTOŚĆ" należy podać reguły CSS, które mają być rozpoznane przez daną wersję przeglądarki Internet Explorer.
Same reguły CSS mogą znajdować się w elemencie style lub w zewnętrznym pliku CSS dołączonym do danego dokumentu HTML, wtedy jako "ZAWARTOŚĆ" podajemy, na przykład <link href="arkusz1.css" rel="stylesheet">.
Do utworzenia "WARUNKU" możemy wykorzystywać następujące oznaczenia:
| Oznaczenie | Wyjaśnienie |
|---|---|
| IE | odnosi się do każdej wersji przeglądarki Internet Explorer (każdej od wersji 5) |
| IE wersja | odnosi się do przeglądarki Internet Explorer o podanej wersji, np. IE 7 - odnosi się do wersji 7, IE 8 - odnosi się do wersji 8 |
| WindowsEdition | odnosi się do systemu Windows 7 |
| WindowsEdition wersja | odnosi się do systemu Windows 7 o podanej wersji jego edycji, np. WindowsEdition 1 |
Dodatkowe oznaczenia, które możemy wykorzystywać do utworzenia "WARUNKU", zostały podane pod spodem:
| Oznaczenie | Wyjaśnienie |
|---|---|
| lt | każda wersja przeglądarki IE mniejsza niż podana, np. lt IE 8 - odnosi się do przeglądarki IE w wersji 7, 6, 5.5, 5 |
| lte | każda wersja przeglądarki IE mniejsza lub taka sama jak podana, np. lte IE 8 - odnosi się do przeglądarki IE w wersji 8, 7, 6, 5.5, 5 |
| gt | każda wersja przeglądarki IE większa niż podana, np. gt IE 8 - odnosi się do przeglądarki IE w wersji 9 |
| gte | każda wersja przeglądarki IE większa lub taka sama jak podana, np. gte IE 8 - odnosi się do przeglądarki IE w wersji 8, 9 |
| ! | operator negacji, zapis !IE 8 - odnosi się do każdej wersji przeglądarki IE tylko nie do wersji 8 |
| & | operator "i", zapis WindowsEdition & IE 7 - odnosi się do przeglądarki IE w wersji 7 uruchomionej w systemie Windows 7 |
| | | operator "lub", zapis IE 7 | IE 9 - odnosi się do przeglądarki IE w wersji 7 lub 9 |
| () | nawiasy służą do tworzenia bardziej złożonych warunków, np. (IE 7 | IE 9) & WindowsEdition - odnosi się do przeglądarki Internet Explorer w wersji 7 lub 9 uruchomionej w systemie Windows 7 |
Pod spodem został zaprezentowany przykładowy dokument HTML, który zawiera w sobie omawiany wzór dla przeglądarki Internet Explorer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p {
background-color:lightblue;
}
</style>
<!--[if gte IE 8]>
<style>
p {background-color:silver;}
</style>
<![endif]-->
</head>
<body>
<p>to jest przykładowy element - p</p>
</body>
</html>
Wzór, który został dodany do przykładowego dokumentu HTML, będzie interpretowany tylko przez przeglądarkę Internet Explorer od wersji 8 wzwyż. Dlatego kolor tła elementu p w tych wersjach przeglądarki Internet Explorer będzie srebrny (silver), a nie jasnoniebieski (lightblue).
Uwaga Przeglądarka Internet Explorer od wersji 10 nie interpretuje zapisów przedstawionych w tej części kursu CSS, ponieważ dogoniła ona (w dużym stopniu) pozostałe przeglądarki internetowe pod względem interpretacji języka CSS.
Jeżeli chcielibyśmy utworzyć osobne reguły CSS dla poszczególnych wersji innych przeglądarek internetowych, np. Firefox, Opera, to do tego celu trzeba wykorzystać, np. język programowania JavaScript.
W następnej części kursu CSS poznamy wartości i jednostki występujące w CSS.