CSS3 újdonságok, amiket használni kell

A CSS3 sok okosságot ad a kezünkbe, de sajnos a böngészők támogatásától függünk. Mivel egyre kevesebben használják az IE8-t, így lassan belekezdhetünk pár nagyon hasznos CSS3 által biztosított jóságba.

Számoljunk a calc()-val

Nagyon hasznos dolog a calc() funkció, mely pár egyszerű számítást enged elvégezni CSS-ben. Ráadásul szabadon mixelhetjük a különböző mértékegységet is. Aki használ %-ban megadott szélességeket az tudja, hogy a 100% szélességű DIV-nek ha adunk padding-t jobbról és balról, akkor az a 100% szélességen felül jelenik meg. Nos, ezt most már nagyon jól lehet kezelni, a következőképpen.

.content{
width: calc(100% - 50px);
padding: 10px 25px;
}

Használjuk a fejlett selectorokat

Lassan teljesen elfelejthetjük, hogy minden stílus elemnek külön tag-t, vagy azonosítót kell adnunk. A CSS2.1 és CSS3 óta nagyon sok fejlett selector-t kaptunk, egyre szélesebb támogatással. Mivel kódból tanul az ember, így inkább belekommenteztem a kódba, mi, mit csinál.

// ::first-letter – az adott elem első betűjét választhatjuk ki vele, és adhatunk neki külön tulajdonságokat, esetünkben piros lesz.
p::first-letter{
color: red;
}
// ::first-line – hasonlóan az előző selectorhoz, itt az elem első sorát választjuk ki és adunk neki tulajdonságokat
p::first-line{
padding-left: 20px;
}
// kiválasztjuk az összes olyan input elemet, amelynek a data-valami=”akarmi” tulajdonsága adott
input[data-valami=akarmi]{
border: 1px solid black;
}
// hasonlóan az előző selectorhoz, az elem tulajdonságát célozzuk, de itt csak azokat amik „akarmi”-vel kezdődnek, pl.: <input data-valami=”akarmi_lehet_itt” …/>
input[data-valami^=akarmi]{
border: 1px solid black;
}
// így kiválaszthatjuk az első selector utáni .elem osztályú elemet, de csak egyet.
input[data-valami=akarmi] + .elem{
background-color: red;
}

Generált tartalom és számlálók

Nagyon jó megoldást kínál a CSS3 mind a valós idejű tartalomgenerálásra, mind számláló használatra.

A ::before az adott elem elejére, míg a ::after az adott elem végére generál tartalmat, lássuk is hogyan.

HTML:

<div class="content">
<span data-title="szöveg">gomb</span>
<span data-title="más szöveg">gomb</span>
<span data-title="még szöveg">gomb</span>
</div>

CSS:

.content{
/* inicializálunk egy cnt nevű számlálót */
counter-reset: cnt;
}
/* a content DIV elején létrehoz egy elemet az alábbi tartalommal */
.content::before{
content: "valami tartalom a div elejére";
display: block;
color: red;
padding: 10px;
}
.content span{
display: inline-block;
background-color: yellow;
margin: 5px;
}
/* létrehozunk egy elemet a span elemek végére */
.content span::after{
/* minden alkalommal, amikor ez a szabály lefut, a cnt növekedni fog egyel. */
counter-increment: cnt;
/* a span elem végére hozzáfűzzük a # cnt részt */
content: " #" counter(cnt);
display: inline-block;
padding: 5px;
} /* létrehozunk egy elemet a span elemek elejére */
.content span::before{
content:attr(data-title);
color:#666;
display: none;
}
/* hover esemény a span elején létrehozott elemre */
.content span:hover::before{
display: inline-block;
padding-right: 5px;
}

A ::before és ::after példa

Buy and Trade Bitcoin at Binance