Egy női webdesigner dolgozik a számítógépén egy modern irodában
Kép jóváírása: monkeybusinessimages/iStock/Getty Images
Az eredeti Cascading Style Sheets specifikáció, valamint annak sokkal újabb CSS3 változata a HTML-weblapok javítására és formázására használt technológiák. A CSS-t eredetileg úgy tervezték, hogy hatékonyabban kezelje a weboldal megjelenítési rétegét, mint formázás HTML-lel, aminek soha nem volt célja a kortárs web összetett felépítésének kezelése. Mivel a CSS2 a CSS1 univerzálisan elfogadott kiterjesztése, a szám nélküli CSS kifejezés a CSS2 szerepeltetését jelenti. A CSS3 specifikáció 2014 júliusában még fejlesztés alatt áll, ezért a webfejlesztőknek figyelembe kell venniük, hogy a funkciók támogatása böngészőnként eltérő.
A CSS3 visszafelé kompatibilis a CSS-szel
A CSS3 a CSS2 frissítése, amely fenntartja a kompatibilitást a CSS összes funkciójával – a CSS3 egyetlen CSS-kódot sem von le. A CSS3 kód célja, hogy a weboldalak jobban nézzenek ki és gyorsabban töltsenek be, valamint csökkentsék a fejlesztéshez szükséges időt a felhasználó böngészőjében. A CSS3 segítségével a webdesign kevésbé függ a képfájloktól az oldalterv-elemek esetében, és kevesebb kép felhasználásával csökkenti a fájlátviteli kérelmeket és a letöltési időt. A CSS1 a megjelenés formázására összpontosított, míg a CSS2 pozicionálási lehetőségeket adott a szöveghez és az objektumokhoz. A régebbi böngészőverziók, mint például az IE 9 és korábbi verziók, nem támogatják széles körben a CSS3 hozzáadott funkcióit, amelyek további fejlesztési időt igényelhetnek a CSS tartalékkód karbantartásához.
A nap videója
A CSS3 lekerekített sarkokat és színátmeneteket ad hozzá
A CSS3 előtt a webfejlesztőknek képfájlokat kellett tervezniük, hogy olyan dolgokat adhassanak hozzá, mint a lekerekített sarkok a szerkezeti szegélyekhez és a háttérképek színátmeneteihez; A CSS3 hasonló funkciókat tartalmaz, amelyek néhány sornyi kóddal hozzáadhatók. A CSS-ben a webfejlesztőnek meg kell terveznie egy szegélyt vagy színátmenetet, feltöltenie kell a képkiszolgálóra, el kell helyeznie a képet az oldalon, és a CSS segítségével kell helyesen elhelyeznie a szegélyt. A CSS3-ban a webfejlesztő valami hasonlót hajthat végre a ".roundBorder{border-radius: 10px;}" kóddal. A háttérszínátmenetek egy kicsit bonyolultabbak, és eltérő kódot igényelnek a különböző böngészőkhöz. Például a Chrome és az IE fehér-fekete színátmenete a következő kódot használja: ".gradBG{background: liner-gradient (white, black);}".
A CSS3 animációs funkciókat és szövegeffektusokat ad hozzá
A CSS3 néhány olyan funkcióval rendelkezik, amelyek nem jelennek meg a CSS-ben, hogy javítsák az oldalelemek megjelenését. A CSS3 segítségével a webfejlesztők szövegárnyékot adhatnak a szöveghez, hogy megkönnyítsék az olvasást, vagy vizuális hangulatot adjanak, és sortörést kényszeríthetnek a hosszabb szavakon belül, hogy a szótördeléssel elférjenek az oszlopok belsejében. A CSS3 előtt a webfejlesztőknek animációt kellett kódolniuk olyan szkriptnyelveken, mint a JavaScript és a jQuery; A CSS3 számos animációs funkciót ad a tervezési réteghez. A W3C még mindig dolgozik egy webes animációs szabványon, hogy kidolgozza a különböző animációs technikák közötti kompatibilitási problémákat.
A CSS3 szövegoszlopokat definiál
A CSS3 lehetőséget ad a szövegrészek több oszlopra történő felosztására, hogy újságként olvasható legyen. A CSS2 specifikációban a webfejlesztőknek nehéz dolguk van többoszlopos szövegrészek létrehozásával, mivel a szabvány nincs felszerelve a szöveg automatikus felosztására. Különösen azoknál a webhelyeknél, amelyek reszponzív dizájnnal rendelkeznek, olyan fejlesztési technikával, amely átrendezi és átméretezi a tartalmat a az eszköz képernyőfelbontását tekintve a nagyobb monitorral rendelkezőknek nehézséget jelenthet a képernyőn szétterülő szövegsorok elolvasása. képernyő.
