[[oktatas:web:css|< CSS]]

====== Feltételes CSS ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2013, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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. 


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

</code>


Ha tagadni szeretnénk az IE böngészőket, akkor egy felkiáltó jelet írunk elé:
<code>
<!--[if !IE]><!-->
	<link rel="stylesheet" href="not_ie.css" />
 <!--<![endif]-->
</code>

Csak Internet Exploler 6:
<code html>
<!--[if IE 6]>
	<link rel="stylesheet" href="ie6.css" />
<![endif]-->
</code>

Csak Internet Exploler 7:
<code>
<!--[if IE 7]>
	<link rel="stylesheet" href="ie7.css">
<![endif]-->
</code>

Az Internet Exploler 6-és korábbi verziókhoz:
<code>
<!--[if lt IE 7]>
	<link rel="stylesheet" href="ie7_and_down.css" />
<![endif]-->
</code>

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


===== Média =====

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

<code css>
.doboz1 {
    background-color: red;
}

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

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):

<code css>
/* 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;
	}
	
}

</code>