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

A legnagyobb különbség a CSS2 és CSS3 az, hogy a CSS3 különböző szakaszokra lett felosztva, ún modulok. Ezen modulok mindegyike átjut a W3C-n az ajánlási folyamat különböző szakaszaiban. Ez a folyamat sokkal megkönnyítette, hogy a különböző gyártók a CSS3 különböző darabjait elfogadják és megvalósítsák a böngészőben.

Ha összehasonlítja ezt a folyamatot a CSS2-vel történtekkel, ahol mindent egyetlen dokumentumként nyújtottak be az összes Lépcsőzetes stíluslapok információit, akkor kezdi meglátni az ajánlás kisebb, egyedi darabokra bontásának előnyeit. Mivel mindegyik modulon külön dolgoznak, a fejlesztők sokkal szélesebb körű böngészőtámogatást élveznek a CSS3 modulok számára.

Új CSS3 választók

A CSS3 számos új módszert kínál a CSS-szabályok megírására új CSS-választókkal, valamint egy új kombinátort és néhány új álelemet.

Három új tulajdonságválasztó létezik:

• Az attribútum kezdete pontosan megegyezik:

  elem [foo ^ = "bar"]

  Az elemnek van egy foo nevű attribútuma, amely "bár" -val kezdődik.
instagram viewer
• Az attribútum vége pontosan megegyezik:

  elem [foo $ = "bar"]

  Az elemnek van egy foo nevű attribútuma, amely "bár" -val végződik pl.
• Az attribútum tartalmazza a mérkőzést:

  elem [foo * = "bar"]

  Az elemnek van egy tulajdonság hívott foo amely a "bar" karakterláncot tartalmazza.

16 új álosztályt vezettek be:

• :gyökér
  • A dokumentum gyökéreleme.
• : n-dik gyermek (n)
  • Használja ezt a pontos gyermekelemek egyezéséhez, vagy használjon változókat a váltakozó egyezések megszerzéséhez.
• : n-dik utolsó gyermek (n)
  • Pontos gyermekelemeket egyezzen meg az utolsótól számítva.
• : n-edik típus (n)
  • Párosítsa a testvér elemeket ugyanazzal a névvel előtte a dokumentumfában.
• : n-edik típus-utolsó (n)
  • Illessze össze az azonos nevű testvérelemeket alulról felfelé számítva.
• :utolsó gyerek
  • Egyezik az utolsóval gyermek elem a szülő.
• : első típusú
  • Illessze össze az ilyen típusú első testvér elemet.
• : utolsó típusú
  • Illessze össze az adott típus utolsó testvér elemét.
• :egyedüli gyermek
  • Illessze össze azt az elemet, amely a szülője egyetlen gyermeke.
• : csak típusú
  • Illessze össze azt az elemet, amelyik típusa az egyetlen.
• :üres
  • Illessze össze azt az elemet, amelynek nincs gyermeke (beleértve a szöveges csomópontokat is).
• :cél
  • Illesszen egy olyan elemet, amely a hivatkozó URI célja.
• : engedélyezve
  • Illessze az elemet, ha engedélyezve van.
• :Tiltva
  • Illessze össze az elemet, ha le van tiltva.
• : bejelölt
  • Illessze össze az elemet, ha be van jelölve (választógomb vagy jelölőnégyzet).
• : nem
  • Egyezik, ha az elem nem egyezik az egyszerűvel válogatók.

Van egy új kombinátor:

• elemA ~ elemB
  • Egyezik, ha a B elem valahol az A elem után következik, nem feltétlenül azonnal.

Új tulajdonságok

A CSS3 számos új CSS tulajdonságot is bemutatott. Ezen tulajdonságok közül sok olyan vizuális stílust hoz létre, amelyek valószínűleg többet társítanak egy olyan grafikus programhoz, mint például Photoshop. Ezek egy része, például a határ sugara vagy a box-shadow, a CSS3 bevezetése óta létezik. Mások, például a flexbox vagy akár CSS A Grid olyan újabb stílusok, amelyeket még mindig gyakran CSS3-kiegészítésnek tekintenek.

A CSS3-ban a doboz modellje nem változott. Van azonban egy csomó új stílustulajdonság, amelyek elősegíthetik a dobozok hátterének és szegélyeinek stílusát.

Több háttérkép

A háttérkép, a háttérpozíció és a háttérismétlés stílusok használatával megadhat több háttérképet, amelyeket egymásra kell rétegezni a mezőben. Az első kép a felhasználóhoz legközelebb eső réteg, mögötte az alábbiak vannak festve. Ha van háttérszín, akkor az az összes képréteg alá kerül.

Új háttérstílus-tulajdonságok

Néhány új háttértulajdonság is található a CSS3-ban:

• háttér-klip
• Ez a tulajdonság határozza meg, hogyan kell a háttérképet nyírni. Az alapértelmezett a border-box, de megváltoztatható kitöltő mezőre vagy tartalom mezőre.
• háttér-eredet
• Ez a tulajdonság határozza meg, hogy a hátteret be kell-e helyezni a kitöltő mezőbe, a szegélydobozba vagy a tartalom mezőbe.
• háttérméret
• Ez a tulajdonság a a háttérkép mérete. Lehetővé teszi nyújtson kisebb képeket az oldalhoz.

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

A meglévő háttérstílus-tulajdonságokban is van néhány változás:

• háttérismétlés
  • Két új értéke van ennek a tulajdonságnak - tér és kerek. A szóköz a csempézett képet egyenletesen helyezi el a dobozban anélkül, hogy levágnák. A kerek átméretezi a háttérképet úgy, hogy az a mező sokszorosát csempézze.
• háttér-kötődés
  • Új "local" értéket adunk hozzá, hogy a háttér gördüljön az elem tartalmával, amikor az elem gördítősávval rendelkezik.
• háttér
  • A háttér gyorsírás tulajdonság hozzáadja a méret és az eredet tulajdonságait.

CSS3 Border Properties

A CSS3-ban a szegélyek lehetnek a megszokott stílusok (szilárd, dupla, szaggatott stb.), Vagy kép. Ráadásul a CSS3 támogatja a lekerekített sarkokat. A szegélyképek azért érdekesek, mert létrehoz egy képet mind a négy határról, majd elmondja a CSS-nek, hogyan kell alkalmazni ezt a képet a határain.

Új szegélystílus-tulajdonságok

Van néhány új szegélytulajdonság a CSS3-ban:

• határsugár
• határ-jobb-jobb-sugár, határ-jobb-jobb-sugár, határ-alsó-bal-sugarú, határ-felső-bal-sugár
• Ezek a tulajdonságok lehetővé teszik lekerekített sarkok létrehozását a határain.
• határ-kép-forrás
• Megadja a használni kívánt képforrás fájlt a már definiált szegélystílusok helyett.
• határ-kép-szelet
• A kép-szegélyek befelé mutató eltolódásait ábrázolja.
• határ-kép-szélesség
• Meghatározza a szélességi kép szélességének értékét.
• határ-kép-kezdet
• Megadja azt az összeget, amelyet a border-image terület túlmutat a border-boxon.
• határ-kép-nyújtás
• Meghatározza, hogy a szegélykép oldala és középső része hogyan legyen csempézve vagy méretezve.
• határ-kép
• Az összes border-image tulajdonság gyorsírási tulajdonsága.

A CSS3 további tulajdonságai, amelyek a határokkal és a hátterekkel kapcsolatosak

Ha egy doboz törött egy oldaltöredéknél, oszloptörésnél vagy sortörésnél (beillesztett elemeknél), akkor a doboz-díszítés-törés tulajdonság meghatározza, hogy az új dobozok hogyan vannak csomagolva szegéllyel és párnázattal. A hátterek több törött doboz között oszlanak meg ezzel a tulajdonsággal.

Egy új box-shadow tulajdonság árnyékokat ad a doboz elemekhez.

A CSS3 segítségével most könnyedén beállíthat több oszlopos weboldalt táblázatok nélkül vagy bonyolultan div tag struktúrák. Egyszerűen megmondja a böngészőnek, hogy a törzselemnek hány oszlopa legyen és milyen szélesnek kell lennie. Ezenkívül felvehet határokat (szabályokat) és háttérszíneket, amelyek átfogják az oszlop magasságát, és a szövege automatikusan átfolyik az összes oszlopon.

Adja meg az oszlopok számát és szélességét

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

• oszlop szélesség
  • Meghatározza az oszlopok szélességét. A böngésző ezt követően lefuttatja a szöveget, hogy a helyet ilyen széles oszlopokkal töltse ki.
• oszlopszám
  • Meghatározza az oszlopok számát az oldalon. A böngésző ekkor elég széles oszlopokat hoz létre, hogy elférjenek a térben, de csak az Ön által megadott számot.
• oszlopok
  • Gyorsírás tulajdonság, ahol megadhatja a szélességet vagy a számot (vagy mindkettőt, de ennek ritkán van értelme).

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

Hézagok és szabályok oszlopok közé kerülnek ugyanabban a többoszlopos forgatókönyvben. A rések szét fogják tolni az oszlopokat, de a szabályok nem foglalnak helyet. Ha az oszlopszabály szélesebb, mint a rése, akkor átfedi egymást a szomszédos oszlopokkal. Öt új tulajdonság áll rendelkezésre az oszlopok szabályainak és hiányosságainak:

• oszloprés
  • Meghatározza az oszlopok közötti rések szélességét.
• oszlop-szabály-szín
  • Meghatározza a szabály színét.
• oszlop-szabály stílus
  • Meghatározza a szabály stílusát (folytonos, pontozott, dupla stb.).
• oszlop-szabály-szélesség
  • Meghatározza a szabály szélességét.
• oszlop-szabály
  • Gyorsírás, amely mindhárom oszlopszabálytulajdonságot meghatározza egyszerre.

CSS3 oszlopszünetek, átívelő oszlopok és kitöltő oszlopok

Oszlop a breakek ugyanazokat a CSS2 opciókat használják, amelyeket a lapozott tartalom törései definiálásához használnak, de három új tulajdonsággal: előtörés, áttörés, és betörés.

A táblázatokhoz hasonlóan beállíthatja az elemeket az oszlopok átívelésére az oszlop-span tulajdonsággal. Ez lehetővé teszi olyan címsorok létrehozását, amelyek több oszlopra kiterjednek, mint egy újság.

Az oszlopok kitöltése határozza meg, hogy az egyes oszlopokban mennyi lesz a tartalom. A kiegyensúlyozott oszlopok megpróbálnak ugyanannyi tartalmat elhelyezni minden oszlopban, miközben az automatikus csak addig továbbítja a tartalmat, amíg az oszlop meg nem telik, majd a következőre megy.

További funkciók a CSS3-ban, amelyek nem szerepelnek a CSS2-ben

A CSS3-ban rengeteg további szolgáltatás létezik, amelyek nem léteztek a CSS2-ben, többek között:

• CSS Template layout modul és CSS3 Grid pozícionáló modul: Rácsok létrehozása CSS-sel.
• CSS3 szöveg modul: Vázolja fel a szöveget, és akár árnyékokat is létrehozhat a CSS segítségével.
• CSS3 színes modul: Most átlátszatlansággal.
• Változások a doboz modelljén: Beleértve a sátor tulajdonság, amely úgy működik, mint az IE címke.
• CSS3 felhasználói felület modul: Új kurzorok, válaszok a műveletekre, a kötelező mezők, sőt az elemek átméretezése.
• Média lekérdezések: Média lekérdezések nagyobb rugalmasságot biztosít a stíluslap használatának meghatározásakor. Például meghatározhat egy stíluslapot, amely csak a 20em-nél nagyobb nézetablakú kézi eszközökhöz használható.
• CSS3 Ruby modul: Támogatást nyújt azoknak a nyelveknek, amelyek szöveges rubint használnak a dokumentumok jegyzeteléséhez.
• CSS3 Paged Media modul: A lapozott média (papír, fólia stb.) Még nagyobb támogatása.
• Generált tartalom: Fejlécek és láblécek, lábjegyzetek és egyéb, programozottan generált tartalom futtatása, különösen a lapozott média számára.
• CSS3 Beszéd modul: Változások a fonikus CSS-ben.