Tartalomjegyzék

< CSS

Feltételes CSS

Miért jó a CSS?

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;
	}
 
}