CSS3 vs CSS - lépcsőzetes stíluslapok vagy CSS a webdizájn kulcseleme. Webfejlesztõként vagy tervezõként mélyen meg kell értenie a CSS-t, különös tekintettel a CSS3 és a CSS közötti különbségre.

Lehet, hogy hallottál vagy találkoztam a CSS3 kifejezéssel, ha elolvasta a webfejlesztésről vagy webdesignról. Ha valaha is gondoltál arra, hogy mi lehet a különbség a CSS3 és a CSS között, íme itt minden kételkedését megnyugtatni: Mindkettő azonos.

Így van: a CSS3 és a CSS ugyanolyan különböznek egymástól, mint a HTML és a HTML5. A CSS3 egyszerűen a CSS legújabb iterációja. Azok az emberek, akik a CSS kódolásáról most beszélnek, valójában csak a CSS3-ra hivatkoznak.

Mind a HTML5, mind a CSS3 általában zümmögőkké váltak, jelentéseik meghaladják a tényleges technológiájukat. A webes fejlesztés bizonyos alapvető szabványainak betartását szimbolizálják, ahelyett, hogy saját tulajdonú szoftvert használnának. Ezen zümmögések körüli hype már nagyrészt meghalt. A legtöbb vállalat, még azok is, amelyek esküsznek azáltal, hogy mindent házon belül tartanak, egyetértenek abban, hogy ezen alapvető előírások betartása mindenki számára sokkal könnyebbé teszi.

Most már jó ideje telt el a CSS3 elindítása és elfogadása. Nagyon sok nagy dolgot hozott az ipar számára, és meglehetősen nagy előrelépést jelentett a webes fejlesztés szempontjából általában. Az előző verziót, a CSS2-t egészen 1998-ban indították. Ez majdnem 20 évvel ezelőtt. Az egyetlen, 2011-ben elindított változatát CSS2.1 néven kapott. A legtöbb szakértő még a felülvizsgálat során már el is kezdte mondani, hogy a CSS3 elkerülhetetlen. A CSS3 számos olyan funkcióval és képességgel érkezett, amelyek akkorra teljesen szükségessé váltak.

Amit a CSS3-ról valószínűleg nem tudott, az az, hogy a fejlesztés csak egy évvel az előző verzió benyújtása után kezdődött meg. Ez azt jelenti, hogy a W3C 1999 óta dolgozik a továbbfejlesztett verzión. Több mint 12 év telt el a CSS3 első stabil változatának kiadásához.

Hatalmas különbségek vannak a CSS3 és a CSS között (amit hamarosan megismerünk). De az a tény, hogy a böngészők már a kiadásakor készen álltak a CSS3 kiegészítésére. Ennek eredményeként meglehetősen gyorsan alkalmazkodtak az új kiadáshoz. Most minden nagyobb böngésző támogatja a CSS3-ot, még az Internet Explorer is!

Természetesen a W3C továbbra is tovább fejleszti a CSS3 és a HTML5, így a végleges változat valószínűtlen. Az igazságosság kedvéért a végleges változat jelenleg is nem szükségszerű, tekintettel az internet gyors fejlődésére. A webes igényekkel és az iparág ilyen gyors növekedésével és változásával a kódolásnak ugyanolyan gyorsan kell haladnia, ha nem is több.

CSS3 vs CSS Infographics

CSS3 vs CSS különbségek definiálva

Most, hogy egy kicsit tudod a CSS3 hátteréről, nézzük meg közelebbről, hogy mi változott meg. Talán a legnagyobb különbség a CSS3 és az előző kiadás között, amelyet helyettesített, a modul elválasztása. A CSS2-ben minden egy nagy specifikáció volt, amely meghatározta a különféle funkciókat. A CSS3 azonban megváltoztatta ezt azáltal, hogy számos, moduloknak nevezett dokumentumot hozott be. Minden modulnak megvannak a saját új képességei, amelyek nem befolyásolják az előző stabil CSS kiadás kompatibilitását.

Média lekérdezések

Nagyon sok modul érhető el, de csak a négyet teszik közzé a W3C hivatalos ajánlásaként. Ez a négy nagy modul a következő:

  1. Szín, megjelent 2011-ben
  2. 3. szintű szelektorok, közzétéve 2011
  3. Névterek, 201
  4. A média kérdései, megjelent 2012-ben

Ezek közül a legfontosabb modul a média lekérdezések. Valójában ez a modul vitathatatlanul a legfontosabb kiegészítés, amelyet a CSS3 általában a CSS-hez hozott. A médialekérdezések meglehetősen egyszerűek: bizonyos feltételek megadását lehetővé teszi a különböző stíluslapokhoz. Ez lehetővé teszi a webhelyek számára, hogy folyamatosan működjenek vagy reagáljanak a képernyő méretére. Más szavakkal, a weboldalak méreteket és elemeket a különböző eszközökhöz igazíthatják. Manapság valószínűleg a legmeghatározóbb szó a rugalmas webdesign. Tekintettel arra, hogy az internethasználat nagy része jelenleg a mobil eszközökön zajlik, az érzékeny kialakítás elengedhetetlen és a médiakérdések segítik ezt. A modul lehetővé teszi a fejlesztők számára, hogy a webhelyeket a különféle felbontásokhoz igazítsák a tartalom megváltoztatása vagy eltávolítása nélkül.

A médiakereséseket szintén nagyon könnyű kitalálni és hozzáadni. Ha néhányszor használja őket, nagyjából kitalálhatja a többit. Íme néhány példa a kódsorra:

@media képernyő és (maximális szélesség: 600 képpont) (

háttér: #FFF;

)

Úgy tűnik, elég egyszerű, nem? Ezzel a pár kódsorral engedélyezheti a stílusok megjelenítését a képernyőn, amelynek szélessége legfeljebb 600 pixel. Ez azt jelenti, hogy minden, legfeljebb 600 pixel szélességű képernyőn fehér háttér látható. A maximális szélesség csak egy a számos feltétel közül, amelyet alkalmazhat a CSS3 stíluslapjára. Egy másik a készülék maximális szélessége. Ez a képernyő felbontása, és nem a megtekintési terület. Ezenkívül a minimum helyett a minimum is megadható; csak a „min” helyett használja a „max” értéket. A kettőt kombinálhatja is, az alábbiak szerint:

@media képernyő és (min. szélesség: 600 képpont) és (maximális szélesség: 900 képpont) (

háttér: #FFF;

)

Itt a stílus csak a 600–900 pixel látószélességű képernyőkre vonatkozik. A CSS3 tartalmaz néhány előre definiált stíluslapot a népszerű mobil eszközökhöz, például az Apple iPadhez és az iPhonehoz. Itt van néhány közülük:

Most már elég egyértelműnek kell lennie, hogy mennyire fontosak a médialekérdezések. Ez a modul nagyon hasznos azoknak a fejlesztőknek, akik a lehető legkisebb mennyiségű kódolással reagáló webdesignot akarnak létrehozni.

Lekerekített határok

A CSS3 tartalmaz néhány igazán kulcsfontosságú webdizájn szempontot. Például a határokat hackelés nélkül lehet lekerekíteni, a CSS3 lekerekített határokat vezet be. Ez hatalmas plusz volt azoknak a webfejlesztőknek és tervezőknek, akik korábban küzdenek a CSS határaival. Nem meglepő, hogy ezeknek a szolgáltatásoknak egy része még mindig nem működik az Internet Explorer régi verzióiban. Az egyetlen kiegészítő kód, amelyet hozzá kell adnia az adott osztályhoz a stíluslapon belül, például:

-moz-határ-sugár: 5px;

-webkit-border-sugar: 5px;

szegély: 2 képpont szilárd # 897048;

Így a CSS3 sokkal könnyebbé teszi az életet a webfejlesztő és a tervező számára. A kiadás színátmenetekkel is jött, ami a korábbi kiadásokban meglepően nem volt elérhető.

Ajánlott tanfolyamok

  • Online képzés a webszolgáltatásokról Java-ban
  • Professzionális játékfejlesztés a C ++ képzésben
  • Etikai hackelés program
  • Vegas Pro 13 edzőcsomag

Keretes képek, szöveges árnyékok

A CSS3-hoz hozzáadott, de az előző verziókban hiányzó további elemek tartalmazzák a szegélyképeket és a doboz / szöveg árnyékát. A CSS3 sokkal egyszerűbbé tette a dolgokat, elkerülve a hacket a fenti általános stíluselemek bármelyikéhez. Például, itt található a magányos kódsor, amelyet hozzá kell adni a szöveges árnyékokhoz:

text-shadow: 2px 2px 2px # ddccb5;

Oszlopok

A CSS3 egyszerűsítette az oszlopok tartalomhoz történő hozzáadásának módját is. Csak annyit kell tennie, hogy négy sor sort ad hozzá:

  1. oszlop száma
  2. oszlop szélesség
  3. oszlop-rés
  4. oszlop-szabály

Több háttérrel

A legújabb CSS kiadás hozzátette azt is, hogy a CSS több hátterét közvetlenül be lehet vonni ahelyett, hogy korábban hasonló körforgási csapdákat használnának. A kód hihetetlenül egyszerű megjegyezni és írni, és rendkívül fontos a modern webdesign elemek létrehozásához is. Íme egy példa:

.multiplebackgrounds (

magasság: 100 képpont;

szélesség: 200 képpont;

párnázat: 20 képpont;

háttér: url (top.gif) jobb felső sarokban nincs ismétlés,

url (bottom.gif) bal felső sarokban az ismétlés-y,

url (középső.gif) alsó ismétlés-z;

)

Szállítói előtagok

A gyártó előtagjait gyakran használták abban az időben, amikor a CSS3 éppen megjelent. Segítettek a böngészőknek a CSS-kód értelmezésében. A mai napig szoktak, abban az esetben, ha a böngésző nem tudja elolvasni a kódot. Íme a fő böngészők gyártói előtagai:

  • -moz- : Firefox
  • -webkit- : Webkit böngészők, például az Apple Safari és a Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Az Opera előtagja szintén feleslegessé vált, mivel a cég Presto megjelenítő motorjáról mobil és asztali böngészőjét a Webkit platformon váltotta. Noha a szállítói előtagot bizonyos mértékben továbbra is használják, ezen a ponton többnyire eltűnt.

Hozzáadott ál-osztályok

A CSS3 kiegészítésével rengeteg további ál-osztályt kaptunk, ideértve a strukturális osztályokat is, amelyek célja az elemek célzása a dokumentumok helyzete és más elemekhez viszonyítása alapján. Itt van néhány közülük:

  • : a root a dokumentum gyökér elemét célozza meg
  • : nem (k) célozza meg azokat az elemeket, amelyek nem felelnek meg az i) pontban meghatározott szelektoroknak
  • : az első gyermek az első gyermeket célozza meg egy tartályban, az elem típusától függetlenül
  • : az első típusú megcélozza a szülő első elemét
  • : n. gyermek (n) numerikus értékeket használ az n) ponton belül a gyermek elemek megcélzására a szülőben betöltött helyzetük alapján. Például ezt felhasználhatja váltakozó háttérszínek hozzáadásához a blog megjegyzéseihez
  • : üres célelemek, amelyekben nincs szöveg vagy gyermekek, például üres elemek, például
  • : a csak gyermek elemeket céloz meg egy dokumentumfában, amely a szülő egyetlen gyermekeleme

Új CSS3 választók

A CSS3 számos lehetőséget kínál a CSS-szabályok írására az új szelektorokon, egy új kombinációs és álszerelő elemekön keresztül: Íme a három új attribútumválasztó:

  • A pontos egyezésekhez az elem (foo = ”bar”)
  • Egy elem hozzáigazításához a foo nevű attribútumhoz, amely „bar” -nel kezdődik, elem (foo $ = ”bar”)
  • Egy elem hozzáigazításához a foo nevű attribútumhoz, amely „bar” -nel végződik, elem (foo * = ”bar”)

A CSS3 számos új ál-osztálytal érkezik, amelyek közül néhányat fentebb tárgyaltunk. Itt van még néhány:

  • : n-utóbbi (n) megegyezik az utóbbi gyermekelemek pontos elemével
  • : Az n. típusú (n) megegyezik az azonos nevű testvérek elemekkel a dokumentumfában
  • : Az n-edik utolsó (n) típus megegyezik az azonos nevű testvérekkel az alulról
  • : az utolsó típusú megcélozza a szülőn belül az utoljára meghatározott típusú elemet
  • : Csak a típus célozza meg azt az elemet, amelynek ez az egyetlen típusa
  • : Cél célelemek, amelyeket a hivatkozó URI céloz meg
  • : engedélyezve egyezik az elemmel, amikor engedélyezett
  • : le van tiltva az elemmel, amikor le van tiltva
  • : bejelölt megcélozza az elemet, ha egy jelölőnégyzeten vagy egy választógombbal ellenőrzi

Egy új kombinátor

A CSS3 egy vadonatúj kombinátorral is rendelkezik: elementA ~ elementB

Ez az új kombinátor akkor működik, amikor az A elemet valahol utána követi a B elem, de nem azonnal utána.

Új dobozstílus tulajdonságok

A CSS3 ugyanazt a dobozmodellt tartalmazza, mint az előző kiadás, de néhány új stílusjellemzővel, amelyek segítenek a dobozok szegélyeinek és háttereinek stílusában. A CSS3 új háttértulajdonságai:

  • background-klip

Ez a tulajdonság a háttérkép vágásának meghatározására szolgál. Az alapértelmezett vágási méretek a szegélydoboz, de meg lehet változtatni a tartalom vagy párnázat dobozra.

  • background-eredetű

Ezt a tulajdonságot annak meghatározására használják, hogy a háttér bekerüljön-e a szegély dobozba, a tartalom dobozba vagy a párnázó dobozba.

  • background-size

Ez a tulajdonság lehetővé teszi a fejlesztőnek, hogy jelezze a háttérkép méretét, és kisebb képeket nyújtson az oldal illesztéséhez.

A CSS3 megváltoztatta a meglévő háttérstílus-tulajdonságokat is. Itt van egy pillantás a változásokra:

  • background-repeat

Ez a tulajdonság két új értékkel jár: kerek és tér. A Kerek átméretezi a képet, hogy többször rakja be egy dobozba. A szóköz egyenletesen elhelyezi a csempézett képet a dobozban, kivágás nélkül.

  • háttér-attachment

A no tulajdonság nem tartalmaz „helyi” értéket, így a háttér az elemtartalommal görgethető, amennyiben az elemnek van görgetősávja.

Új határ tulajdonságok

A CSS3 lehetővé teszi, hogy a szegélyek kettős, szilárd, szaggatott vagy akár képként is megjelenjenek. A szegélyképek érdekes kiegészítés: lehetővé teszik a mind a négy szegmens képének elkészítését, majd azt mondják a CSS-nek, hogy alkalmazza a képet a szegélyekre. Íme néhány a CSS3-hoz tartozó új szegélytulajdonságok:

  • határ-sugár, határ-alul-jobb-sugár, határ-felső-jobb-sugár, határ-felső-bal-sugár, határ-alul-bal-sugár lehetővé teszi, hogy kerek szegélyeket hozzon létre
  • a border-image-source lehetővé teszi egy képforrásfájl megadását az előre definiált szegélystílusok helyett
  • border-image-szelet a szélső képek széleitől befelé mutató eltolódásokat képviseli
  • border-image-width határozza meg a szegélykép szélességét
  • border-image-outset határozza meg azt a mennyiséget, amely túlmutat a szegély mezőn, amelyre a kép kiterjed
  • a border-image-stretch meghatározza a szegélykép középső és oldalsó részeinek csempézését vagy méretezését

Következtetés - CSS3 vs CSS

Sokkal többet megtudhat a CSS3-ról, amint többet kódol. De van egy figyelmeztetés: a CSS3-ot nem tudja elsajátítani, ha nem ismeri a CSS-t. A CSS3 elsajátítása magában foglalja a CSS megértésének és tapasztalatainak építését. Ha nem ismeri a CSS-t, akkor azt felülről és a CSS3-val együtt kell megtanulnia. A jó dolog az, hogy ha nem ismeri a CSS-t, akkor könnyebbé és gyorsabbá kell tenni a CSS3 és a CSS együttes megtanulását.

Ajánlott cikkek

Íme néhány cikk, amelyek segítenek a CSS3 vs. CSS részletesebb ismertetésében, csak nyissa meg a linket.

  1. CSS vs HTML
  2. Izgalmas tudni a CSS Flexbox Essentials-t kezdőknek
  3. HTML5 vs. JavaScript a legjobb dolog
  4. CSS vs CSS3: Különbségek

Kategória:

Szoftverfejlesztés