A különbség a CSS2 és a CSS3 között

A CSS3 főbb változásainak megértése

A legnagyobb különbség a CSS2 és a CSS3 között a CSS3 felosztása különböző szakaszokba, úgynevezett modulok. Mindegyik modul a W3C-n keresztül halad az ajánlási folyamat különböző szakaszaiban. Ez a folyamat megkönnyítette a CSS3 különböző darabjainak elfogadását és végrehajtását a böngészőben a különböző gyártók.

Ha ezt a folyamatot hasonlítod össze a CSS2-vel történt eseményekhez, ahol mindent egyetlen dokumentumként adtunk meg a Cascading Stíluslapok információkkal együtt, elkezdjük látni az ajánlás feltörésének előnyeit kisebb, egyedi darabokra. Mivel mindegyik modul egyénileg dolgozik, a CSS3 modulok sokkal szélesebb körű böngészési támogatással rendelkeznek.

Mint minden új és változó specifikáció esetében, győződjön meg róla, hogy alaposan teszteli a CSS3 oldalakat annyi böngészőben és operációs rendszerben, amennyit csak tud. Ne feledje, hogy nem cél olyan weboldalak létrehozása, amelyek minden böngészőben pontosan megegyeznek, de annak biztosítására, hogy a használt stílusok, beleértve a CSS3-stílusokat, jól nézzenek ki a böngészőkben, amelyek támogatják őket, és kecsesen viselkednek a régebbi böngészők számára ne.

Új CSS3 választók

A CSS3 számos új módot kínál CSS-szabályok létrehozására új CSS-szelektorokkal, valamint új kombinátorral és néhány új pszeudo-elemekkel.

Három új attribútum választó:

• Az attribútum kezdete megegyezik az elem pontosságával [foo ^ = "bar"] Az elem egy olyan attribútummal rendelkezik, amelyet foo-nak neveznek, ami "bar" -al kezdődik
• Az attribútum-végződés pontosan egyezik az elemrel [foo $ = "bar"] Az elem egy olyan attribútummal rendelkezik, amelyet foo-nak neveznek, amely "bar" -tal végződik
• Az attribútum tartalmazza a meccselemet [foo * = "bar"] Az elem egy olyan attribútummal rendelkezik, amelyet foo nevez, amely a "bar" karakterláncot tartalmazza

16 új ál-osztály:

• :gyökér
  • A dokumentum gyökéreleme. A HTML ez mindig.
• : n-ed gyermek (n)
  • Használja ezt a pontos gyermekelemeket, vagy használjon változókat a váltakozó mérkőzésekhez.
• : n-ed last gyermek (n)
  • Pontosan illeszd be a legutolsó gyermekelemeket.
• : n-edik-of-típusú (n)
  • A dokumentumfában megegyező azonosítóval rendelkező testvérelemeket.
• : n-ed utolsó-a-típusú (n)
  • Illessze össze az azonos névvel rendelkező testvérelemeket alulról.
• :utolsó gyerek
  • Illessze be a szülő utolsó gyermekelemét.
• : az első-of-típusú
  • Illessze be az ilyen fajta első testvérelemet.
• : last-of-típusú
  • Illessze be az utolsó típusú testvérelemet.
• :egyetlen gyermeke
  • Illessze be az elemet, amelyik az egyedüli szülője.
• : csak-a-típusú
  • Illessze be az elemet, amelyik az egyetlen típus.
• :üres
  • Illessze be a gyermek nélküli elemet (beleértve a szöveges csomópontokat is).
• :cél
  • Egyező elem, amely a hivatkozó URI célpontja.
• : engedélyezve
  • Illessze be az elemet, ha engedélyezve van.
• :Tiltva
  • Illessze be az elemet, ha le van tiltva.
• : ellenőrzött
  • Illessze be az elemet, ha be van jelölve (rádiógomb vagy jelölőnégyzet).

• : nem (s)
  • Egyezzen meg, ha az elem nem egyezik az egyszerű választókkal .

Egy új kombinátor:

• elementA ~ elemB
  • Illessze össze, amikor az elemB valahova az elem után következik, nem feltétlenül azonnal.

Új tulajdonságok

A CSS3 számos új CSS tulajdonságot is bevezetett. Ezen tulajdonságok közül sok olyan vizuális stílust hoz létre, amely valószínűleg nagyobb mértékben kapcsolódna egy olyan grafikus programhoz, mint a Photoshop. Ezek közül néhány, mint a határ-sugár vagy a doboz árnyék, már a CSS3 bevezetése óta körül vannak. Mások, mint a flexbox vagy akár a CSS Grid, újabb stílusok, amelyek még mindig gyakran CSS3 kiegészítések.

A CSS3-ban a doboz modellje nem változott. De van egy csomó új stílusú tulajdonság, amely segíteni fog a dobozok hátterének és határainak kialakításában.

Többszörös hátterű mágusok

A háttérkép, a háttérpozíció és a háttér-ismétlés stílusok használatával több háttérképet is megadhat, amelyek a dobozban egymás tetejére vannak rétegezve. Az első kép a felhasználó legközelebbi rétege, mögöttük a következőket festették. Ha van háttérszín, akkor az összes képréteg alatt festett.

Új háttérstílus tulajdonságai

A CSS3 új háttér-tulajdonságai is vannak.

• background-klip
  • Ez a tulajdonság határozza meg, hogy a háttérképet le kell-e vágni. Az alapértelmezett beállítás a keretes mező, de átváltható a padding box vagy a content box.
• background-eredetű
  • Ez a tulajdonság határozza meg, hogy a hátterek legyenek-e a padding box, a border box vagy a content box helyei.
• background-size
  • Ez a tulajdonság lehetővé teszi, hogy jelezze a háttérkép méretét. Lehetővé teszi, hogy kisebb képeket húzzon az oldalhoz.

A meglévő háttérstílus tulajdonságainak módosítása

A meglévő háttérstílus-tulajdonságokra vonatkozóan is van néhány módosítás:

• background-repeat
  • A tulajdonságnak két új értéke van: tér és kör. A csempézett képet a dobozban egyenletesen helyezi el anélkül, hogy levágnák őket. A kerek visszaalakítja a háttérképet úgy, hogy a dobozban sokszor csempéz.
• háttér-attachment
  • Új "helyi" értéket ad hozzá, hogy a háttér gördüljön az elem tartalmaival, ha az elem görgetősávja van.
• háttér
  • A háttéranyag tulajdonság hozzáadja a méret és a eredet tulajdonságait.

CSS3 határfelület

A CSS3 határai lehetnek azok a stílusok, amelyekhez hozzászoktunk (szilárd, kettős, szaggatott stb.), Vagy lehetnek képek. Ráadásul a CSS3 lehetővé teszi a lekerekített sarkok létrehozását. A határoló képek azért érdekesek, mert mind a négy keret képét hozza létre, majd azt mondja meg a CSS-nek, hogyan alkalmazza ezt a képet a határaira.

Új határvonal tulajdonságai

A CSS3-ban vannak új határ tulajdonságok:

• border-radius
  • határvonal-jobb-jobb sugara , határ-alsó-jobb sugara , határ-alsó-bal sugara , határ-felső bal oldali sugara
  • Ezek a tulajdonságok lehetővé teszik, hogy a határokon kerekített sarkokat hozzon létre.
• border-image-forrás
  • Megadja a használandó képforrásfájlt a korábban meghatározott határstílusok helyett.
• border-image-szelet
  • A befelé irányuló eltolódásokat ábrázolja a határ képszélei közül
• border-image-szélesség
  • Határozza meg a szegélyének szélességét.
• border-image-eleve
  • Megadja azt a mennyiséget, amelyet a határoló képterület túlnyúlik a határon.
• border-image-szakaszon
  • Meghatározza, hogy a határkép oldalainak és középső részeinek keretesnek vagy méretezőknek kell lennie.
• border-image
  • Az összes határkép tulajdonságának gyorsító tulajdonsága.

További CSS3 tulajdonságok a határokhoz és hátterekhez kapcsolódóan

Ha egy doboz megszakad egy oldaltörésnél, az oszloptörés a sortöréshez (inline elemek esetén) a box-decoration-break tulajdonság határozza meg, hogy az új dobozok milyen módon vannak szegélyezve és kitöltve. A háttérképeket fel lehet osztani több összetévesztett fiók között a tulajdonság használatával.

Van egy doboz árnyék tulajdonság is, amelyet árnyékelemek hozzáadására használhatunk.

A CSS3 segítségével most egyszerűen létrehozhat egy olyan weboldalt, amelyben több oszlop van táblázatok és bonyolult div tag struktúrák nélkül. Egyszerűen mondja el a böngészőnek, hogy hány oszlopot kell tartalmaznia a testelemnek és milyen szélesnek kell lennie. Plusz hozzáadhat határokat (szabályok), háttérszíneket, amelyek magukban foglalják az oszlop magasságát, és a szöveg automatikusan átmegy az összes oszlopon.

CSS3 oszlopok - határozza meg az oszlopok számát és szélességét

Három új tulajdonság van, amelyek lehetővé teszik az oszlopok számának és szélességének meghatározását:

• oszlop szélesség
  • Határozza meg az oszlopok szélességét. A böngésző ezután áthalad a szövegen, hogy kitöltse a tér széles oszlopokkal.
• oszlop száma
  • Megadja az oldal oszlopainak számát. A böngésző ezután olyan oszlopokat hoz létre, amelyek elég szélesek ahhoz, hogy illeszkedjenek a térbe, de csak a megadott számot.
• oszlopok
  • Pontos tulajdonság, ahol meghatározhatja a szélességet vagy a számot (vagy mindkettőt, de ritkán van értelme).

CSS3 oszlop hiányosságai és szabályai

A hiányosságokat és szabályokat ugyanabban a sokszínűségi forgatókönyvben lévő oszlopok között helyezik el. A rések az oszlopokat szétszedik, de a szabályok nem foglalnak helyet. Ha az oszlop szabály szélesebb, mint a rés, akkor átfedi a szomszédos oszlopokat. az oszlop szabályainak és hézagainak öt új tulajdonsága van:

• oszlop-rés
  • Határozza meg az oszlopok közötti hézagok szélességét.
• oszlop-szabály-szín
  • Megadja a szabály színét.
• oszlop-szabály-style
  • A szabály stílusát határozza meg (szilárd, pontozott, kettős stb.).
• oszlop-szabály-szélesség
  • Megadja a szabály szélességét.
• oszlop-szabály
  • Egy rövidített tulajdonság, amely egyszerre határozza meg mind a három oszlop szabály tulajdonságait.

CSS3 oszloptörések, oszlopok átfűzése és oszlopok kitöltése

Az oszloptörések ugyanazokat a CSS2-beállításokat használják, amelyek meghatározták a megszakításokat a lapozott tartalomban, de három új tulajdonsággal rendelkeznek: törés előtt , törés után és behatolás .

A táblákhoz hasonlóan, az oszlopok oszlopainak megadásával elemeket is beállíthat. Ez lehetővé teszi, hogy olyan újságcímeket hozzon létre, amelyek több oszlopot tartalmaznak, mint egy újság.

Az oszlopok kitöltése meghatározza, hogy mennyi tartalom jelenjen meg az egyes oszlopokban. A kiegyensúlyozott oszlopok mindegyik oszlopban megpróbálják ugyanazt a tartalmat feltölteni, miközben az autót csak a tartalom tölti be, amíg az oszlop tele van, majd a következőhöz.

A CSS3 további funkciói nem szerepelnek a CSS2-ben

A CSS3-ban sok más olyan funkció található, amelyek nem léteztek a CSS2-ben, többek között:

• CSS Template elrendezés modul és CSS3 Rács pozícionáló modul : Rácsok létrehozása CSS-sel.
• CSS3 Szövegmodul : Vázolja le a szöveget, és még csepp árnyékokat is létrehozhat a CSS segítségével.
• CSS3 színmodul : most opacitással.
• A dobozmodell módosításai : Beleértve a címke tulajdonságot, amely úgy működik, mint az IE címke.
• CSS3 felhasználói interfész modul : Új kurzorokat, műveletekre adott válaszokat, kötelező mezőket, és akár átméretezhető elemeket is biztosít .
• Médiakérdések : A médiakérdések lehetővé teszik a rugalmasságot a stíluslap használatának meghatározásakor. Megadhat például egy olyan stíluslapot, amely csak olyan 20 képpontos nézetablakos kézi eszközök esetén használható.
• CSS3 Ruby modul : támogatja azokat a nyelveket, amelyek szöveges rubint használnak a dokumentumok feliratozásához.
• CSS3 Paged Media modul : Még több támogatást nyújt a lapozott média (papír, fólia, stb.) Számára.
• Generált tartalom : L futó fejlécek és láblécek, lábjegyzetek és egyéb tartalom, amelyet programilag generál, különösen a lapozott médiára.
• CSS3 Beszédmodul : A hangos CSS módosítása.