CSS3 újdonságok, amiket használni kell

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