• Szerző: Sallai András
• Copyright © Sallai András, 2013, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

• Nem kell hackolni.
• A stíluslapunk tiszta marad.
• A nem szabványos kódot szankciónálni kell.

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]-->

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