Különbségek a CSS és a CSS3 között
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 arra tervezték, hogy a weblapok megjelenítési rétegét hatékonyabban kezelje, mint a HTML-formátumú formázást, amely soha nem volt hivatott kezelni a kortárs web összetett felépítését. 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 nem vonja le a CSS-kódok egyikét sem. A CSS3 kódot úgy tervezték, hogy a weboldalak jobban nézzenek ki és gyorsabban töltsenek be, valamint csökkentsék a fejlesztéshez szükséges időt az oldalak felépítéséhez 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 képességekkel bővítette a szöveget és az objektumokat. A régebbi böngészőverziók, mint például az IE 9 és korábbi verziói, 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 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 olyan kódot használ, mint a ".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éseket 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 megoldja a különböző animációs technikák közötti kompatibilitási problémákat.
A CSS3 szövegoszlopokat határoz meg
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 a reszponzív dizájnnal rendelkező webhelyek esetében, ez a fejlesztési technika, amely átrendezi és átméretezi a tartalmat a megtekintő eszköz képernyőfelbontása alapján, a nagyobb monitorral rendelkező felhasználók nehezen tudják elolvasni a képernyőn szétterülő szövegsorokat.