< CSS

Feltételes CSS

Szerző: Sallai András

Copyright © Sallai András, 2013, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Miért jó a CSS?

Nem kell hackolni.

A stíluslapunk tiszta marad.

A nem szabványos kódot szankciónálni kell.

A feltételes kódról

A feltételes formázást a head elemek közé tesszük.

A feltételt mindig HTML megjegyzésbe ágyazzuk. Az IE 10 előtti verziói nem ismerik a feltételes utasítást.

Általában Internet Exploler böngészőknél használjuk. A feltételt az if kulcszóval vezetjük be szögletes zárójelben. Az if után adjuk meg a böngészőt. A böngésző általában „IE”. Az if és a IE között használhatunk különböző operátorokat. A felkiáltójel operátor tagadja az Internet Explolert, vagyis azt mondjuk, akkor ha nem Internet Explolerrel nézik az oldalt. Megadhatunk kisebb mint jelet a „lt”, nagyobb mint jelet a „gt” operátorokkal.

<!--[if IE]>
<link rel="stylesheet" href="all_ie_only.css" />
<![endif]-->

Ha tagadni szeretnénk az IE böngészőket, akkor egy felkiáltó jelet írunk elé:

<!--[if !IE]><!-->
<link rel="stylesheet" href="not_ie.css" />
<!--<![endif]-->

Csak Internet Exploler 6:

<!--[if IE 6]> <link rel="stylesheet" href="ie6.css" /> <![endif]-->

Csak Internet Exploler 7:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->

Az Internet Exploler 6-és korábbi verziókhoz:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie7_and_down.css" />
<![endif]-->

Nagyobb mint IE 6:

<!--[if gt IE 6]>
<link rel="stylesheet" href="ie6_and_up.css" />
<![endif]-->

Média

Képernyő mérettől függően más-más beállítást használhatunk.

.doboz1 { background-color: red; } /* Ha képernyő nagyobb mint 480px: */ @media (min-width: 480px) { .doboz1 { background-color: blue; } }

A doboz1 nevű doboz, ha eléri a 480px méretet, a háttér kék színre vált. A háttérszín csak egy példa. Tetszőleges tulajdonságok és értékek megadhatók.

Megmondhatjuk, hogy csak képernyőn szeretnénk (nyomtatón nem):

/* Mobil esetén */ @media screen and (max-device-width: 480px){ .aru { display: block; background-color: white; width: 98%; height: 350px; margin: 5px; } #aruk { max-width: 100%; margin: 0; background-color: gold; display: block; } }