Amit eddig nem tudtál, vagy nem mertél megkérdezni, az most itt lesz. Egy nagy csokor CSS okosság.
Alapvető dolgok
CSS box modell
Az a fránya box modell… Általában ezt a legnehezebb elsajátítani, amikor valaki első ízben találkozik a CSS-el, pedig egyáltalán nem olyan nagy ördöngösség az egész. Alapvetően minden layout dobozokból áll, amiket egymás mellé-alá-fölé igazítunk.
Készítettünk egy kinyomtatható segédletet hozzá, amit itt tudsz letölteni PDF formátumban: CSS és a box modell
CSS rövítítések
Mikor már kellően összemelegedtél a CSS tulajdonságokkal, biztosan feltűnik sok helyen, hogy egyes tulajdonságokat összevonva is jól működő eredményt kapunk. Egyszerűen csak tudni kell a helyes sorrendet, és máris több kilobájtot spórolhatsz a CSS fájlon.
[css]margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
[/css]
…helyett:
[css]margin: 10px 20px 30px 40px;[/css]
Ehhez is készült egy letölthető és kinyomtatható segédlet: CSS rövidítések
Középre igazítás
Az összes CSS kérdés közül talán mindenkinél ez az első: hogyan lehet középre igazítani valamit? (És itt most nem szövegre, hanem egy css boxra gondolunk.)
Elég egyszerű:
[css]div {
width: 960px; /*hogy tényleg box legyen, meg kell adni legalább a szélességét*/
margin: 0 auto; /*a margó felülről és alulról 0, jobbról és balról automatikus*/
}[/css]
Ez esetben nem lehet az elemet úsztatni (float-olni).
A másik módszer az abszolút középre igazítás. Ezt akkor tudjuk alkalmazni, ha ismerjük az elem pontos méretét:
[css]div {
position: relative;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}[/css]
Működéséről annyit, hogy az elemet relatív pozícióba helyezzük, majd fentről (top) és balról (left) 50%-ra pozicionáljuk (a <body>-hoz képest). Ezzel az elem felső és bal szélső oldala pontosan középre kerül. De mi azt szeretnénk, hogy az elem középponja kerüljön középre, ezért negatív értékű felső és bal margóval (margin-top, margin-left) az elem méretének felével (200px/2=100px) arrébb húzzuk. A top és a margin-top opcionális, ha felülről nem akarod középre igazítani, akkor ez a rész elhagyható.
Hosszú szövegek levágása
Tudtad, hogy CSS segítségével is levághatod a szövegek végét? Erre találták ki a text-overflow tulajdonságot.
Adott egy hosszabb szöveg:
Applicake pie bonbon brownie. Brownie croissant topping. Muffin toffee dessert toffee brownie icing.
Amit le lehet rövidíteni:
[css]
width: 500px; /*ilyen széles lesz a szöveg*/
white-space: nowrap; /*ne legyen benne sortörés*/
overflow: hidden; /*ami kilóg, az ne legyen látható*/
text-overflow: ellipsis; /*ellipsis, azaz három pont a levágásnál*/
[/css]
Ez egy igényes megoldás akkor, amikor generált tartalmakat kell megjeleníteni. Előnye, hogy bár a látogató számára nem látható a szöveg, a keresőrobot számára továbbra is látható marad a teljes tartalom.
Az ellipsis-en kívül lehet még az értéke clip (levágás), illetve string is, de utóbbit az eddigi tapasztalatok alapján csak nagyon kevés böngésző támogatja.
CSS “nullázása” (CSS reset)
Csak jó alapokra lehet építkezni, de ha az egyik böngészőben a <h1> alsó margója 10px a másikban meg 20px, akkor egy idő után képes az őrületbe kergetni. Íme a legnépszerűbb CSS reset kódrészlet, melyet Eric A. Meyer készített:
[css]
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
[/css]
A CSS kódolást kezd mindig úgy, hogy ezt bemásolod a CSS fájl elejére. Így, hogy minden közös nevezőre lett hozva, már elkezdheted definiálni a saját szabályaidat.
CSS keretrendszerek
Miért jók a keretrendszerek? Mert egy kész alapot adnak a munkára, amire aztán építkezhetünk. Ezekből jön most három:
HTML5 Boilerplate
Minden benne van, amire szükségünk lehet építkezés közben, ráadásul testre is lehet szabni letöltés előtt.
html5boilerplate.com
960 Grid System
Bár a reszponzív hullámmal kezd kimenni a divatból, mégis érdemes észben tartani és megismerni a 960.gs-t.
960.gs
Foundation
Egy kimondottan reszponzív oldalakhoz készített, grid alapú CSS framework, aminek használtat pillanatok alatt el lehet sajátítani.
foundation.zurb.com
Update: Itt egy összehasonlító táblázat a jelenleg legnépszerűbb CSS keretrendszerekről – usablica.github.io/front-end-frameworks/compare.html
Optimalizálás
cssuai.js
A CSSUserAgent egy JS eszköz, amit ha bekötsz a HTML oldaladba, akkor a <html> címkét ellátja az aktuális böngészőnek megfelelő osztályokkal (class). Így tudsz böngészőkként eltérő CSS tulajdonságokat hozzáadni az egyes elemekhez.
A bekötés igen egyszerű:
[html]<script src="cssua.min.js"></script>[/html]
Ez után meg is nézheted a forráskódban, hogy a <html> címke milyen osztályokat kapott. Egy pléda: tételezzük fel, hogy Internet Explorer 8-ban egy elem 10px-el szélesebb, mint a többi böngészőben.
[css]div {
width: 200px; /*ezt értelmezi minden böngésző…*/
}
.ua-ie-8 div {
width: 190px; /*…de IE8 esetén ezt felülírjuk*/
}[/css]
Ennyire egyszerű, és még szabványos megoldás is. (Halkan megjegyzem, hogy mi is ezt használjuk.) Ha az összes IE verzióban fennáll a probléma, akkor csak .ua-ie, ha Chrome böngészőben, akkor .ua-chrome, ha Chrome és Safari egyaránt, akkor lehet a böngészőmotorra hivatkozni a .ua-webkit osztállyal.
A js fájlt itt tudod letölteni: cssuseragent.org
-prefix-free
Ezt már egy múltkori bejegyzésben is említettem. A CSS3 szabvány nem végleges még, ezért a legtöbb böngésző még csak előtagokkal támogatja az egyes CSS3 tulajdonságokat. Az előzőhöz hasonlóan itt sincs más teendőd, mint bekötni a HTML fájlba a JS-t, és onnantól kezdve elfelejthetjük a -moz, -webkit, -o, -ms előtagok használatát. Ráadásul csak 2kB a mérete.
Beszerzés itt: leaverou.github.io/prefixfree
Vegyes
Ahogy általában mikor egy dobozt pakolunk ki, az alján találjuk meg az apróságokat, hát most jöjjön itt is ez a rész:
CSS matic
Online CSS3 generátor. Gradient, border-radius, noise texture, box shadow.
cssmatic.com
CSS3, please!
Kb. az összes CSS3 tulajdonság összefoglaló oldala.
css3please.com
CSS3 Generator
Egy másik nagy tudású online generátor.
css3generator.com
Font Squirrel webfont generator
Feltöltöd a betűtípust, és generál belőle @font-face kitet, amit aztán beköthetsz a saját css fájlodba. Az oldalon még találhatsz készen letölthető készleteket is.
fontsquirrel.com/tools/webfont-generator
<html>ipsum
Teszteléshez jól jöhet. Biztosan nem kell bemutatnom a lipsum.com-ot <html>ipsum annyiban más, hogy egyből html kódot fog generálni belőle.
html-ipsum.com
JQuery plugins
Bár ez már JS-ről szól, akkor is érdemes körülnézni. Egy igényes magyar nyelvű oldal, rengeteg JQuery bővítménnyel, és azok leírásával, használatuknak bemutatásával.
jquery-plugins.hu
CodePen
A kódolós közösségi oldal. Rengeteg érdekes megoldást találhatsz itt, érdemes körülnézni. (Engem is megtalálsz itt.)
codepen.io
Remélem sok kérdésedre választ kaptál a bejegyzésből. Like?
