Diferenca midis CSS2 dhe CSS3

Kuptimi i ndryshimeve të mëdha në CSS3

Dallimi më i madh midis CSS2 dhe CSS3 është se CSS3 është ndarë në seksione të ndryshme, të quajtura module. Secila prej këtyre moduleve është duke bërë rrugën e saj përmes W3C në faza të ndryshme të procesit të rekomandimit. Ky proces e ka bërë shumë më të lehtë për pjesë të ndryshme të CSS3 që të pranohen dhe zbatohen në shfletues nga prodhues të ndryshëm.

Nëse e krahasoni këtë proces me atë që ndodhi me CSS2, ku çdo gjë është dorëzuar si një dokument i vetëm me të gjitha informacionet e Sheets së Cascading Style brenda tij, ju filloni të shihni përparësitë e thyerjes së rekomandimit në copa të vogla individuale. Për shkak se secili prej moduleve po punohet individualisht, ne kemi një gamë shumë më të gjerë të mbështetjes së shfletuesit për modulet CSS3.

Ashtu si me çdo specifikim të ri dhe ndryshues, sigurohuni që të testoni faqet tuaja CSS3 në mënyrë të plotë në sa më shumë shfletues dhe sisteme operative që mundeni. Mos harroni se qëllimi nuk është krijimi i faqeve të internetit që duken saktësisht të njëjta në çdo shfletues, por që të siguroheni që stilet që përdorni, duke përfshirë stilet CSS3, duken të shkëlqyera në shfletuesit që i mbështesin ato dhe që ato bien në mënyrë të këndshme për shfletuesit më të vjetër se mos.

New Selectors CSS3

CSS3 ofron një sërë mënyrash të reja që mund të shkruani rregullat e CSS me selektorë të rinj CSS, si dhe një kombinator të ri dhe disa pseudo-elemente të reja.

Tre përzgjedhësa të rinj të atributeve:

• Atributi fillon pikërisht pikërisht elementin [foo ^ = "bar"] Elementi ka një atribut të quajtur foo që fillon me "bar" p.sh.
• Elementi që përfundon përputhet saktësisht me elementin [foo $ = "bar"] Elementi ka një atribut të quajtur foo që përfundon me "bar" p.sh.
• Atributi përmban elementin e ndarjes [foo * = "bar"] Elementi ka një atribut të quajtur foo që përmban "bar" string

16 pseudo-klasa të reja:

• : root
  • Elementi rrënjësor i dokumentit. Në HTML kjo është gjithmonë.
• : n-fëmijë (n)
  • Përdoreni këtë për të përputhur elementet e saktë të fëmijës ose përdorni variablat për të marrë ndeshje të alternuara.
• : n-fundit-fëmijë (n)
  • Përputhni elementët e saktë të fëmiut që llogariten nga ajo e fundit.
• : n-e tipit (n)
  • Përputhni elementët e vëllezërve me të njëjtin emër para tij në pemën e dokumentit.
• : n-fundit-e tipit (n)
  • Përputhni elementët e vëllezërve me të njëjtin emër duke numëruar nga poshtë.
• :fëmija i fundit
  • Përputhni elementin e fundit të fëmijës të prindit.
• : Së pari-e-tipit
  • Përputhni elementin e parë të vëllezërve të atij lloji.
• : fundit-e-tipit
  • Përputhni elementin e fundit të vëllezërve të atij lloji.
• : vetëm-fëmijë
  • Përputhni elementin që është fëmija i vetëm i prindit të tij.
• : vetëm-e-tipit
  • Përputhni elementin që është i vetmi në llojin e tij.
• : bosh
  • Përputhni elementin që nuk ka fëmijë (duke përfshirë nyjet tekstuale).
• : objektiv
  • Përputhni një element që është objektivi i URI-së referuese.
• : aktivizuar
  • Përputhni elementin kur është aktivizuar.
• : me aftësi të kufizuara
  • Përputhni elementin kur është çaktivizuar.
• : kontrollohen
  • Përputhni elementin kur është e kontrolluar (butoni radio ose kutia e zgjedhjes).

• : jo (s)
  • Përputhje kur elementi nuk përputhet me përzgjedhësin e thjeshtë s.

Një kombinator i ri:

• elementA ~ elementB
  • Përputhni kur elementB ndjek diku pas elementA, jo domosdoshmërisht menjëherë.

Prona të reja

CSS3 gjithashtu prezantoi një numër të pronave të reja CSS. Shumë prej këtyre pronave ishin për të krijuar stile vizuale që do të ngjarë të lidhen më shumë me një program grafike si Photoshop. Disa prej tyre, si rrezja e kufirit ose kutia e hijes, kanë qenë rreth e rrotull që nga prezantimi nëse CSS3. Të tjerë, si flexbox apo edhe CSS Grid janë stile më të reja që ende konsiderohen si shtesë CSS3.

Në CSS3, modeli i kuti nuk ka ndryshuar. Por ka një mori karakteristikash të stilit të ri që mund t'ju ndihmojnë të përcaktoni sfondet dhe kufijtë e kutive tuaja.

Sfondi i shumëfishtë I mages

Duke përdorur imazhin e sfondit, pozitën e sfondit dhe stilet e përsëritjes së sfondit, ju mund të specifikoni imazhe të shumta të sfondit që do të shtresohen në krye të njëri-tjetrit në kutinë. Imazhi i parë është shtresa më e afërt me përdoruesin, me ato të mëposhtme të pikturuara prapa. Nëse ka një ngjyrë të sfondit, ajo është pikturuar nën të gjitha shtresat e imazhit.

Tiparet e reja të stilit të sfondit

Ka edhe disa prona të reja të sfondit në CSS3.

• background-clip
  • Kjo pronë përcakton se si duhet të pritet imazhi i sfondit. Parazgjedhja është kutia e kufirit, por mund të ndryshohet në kutinë e mbushjes ose në kutinë e përmbajtjes.
• background-origjinës
  • Kjo pronë përcakton nëse sfondi duhet të jetë vend në kutinë e mbushjes, kutinë e kufirit ose kutinë e përmbajtjes.
• background-size
  • Kjo pronë ju lejon të tregoni madhësinë e imazhit të sfondit. Kjo ju lejon të zgjasni imazhe më të vogla për të përshtatur faqen.

Ndryshimet në Gjendjet ekzistuese të Stilit të Sfondit

Ekzistojnë gjithashtu disa ndryshime në pronat e stilit të mëparshëm të sfondit:

• background-përsëris
  • Ka dy vlera të reja për këtë pronë: hapësirë ​​dhe raund. Hapësira hapësinor imazhin tiled në mënyrë të barabartë brenda kutisë, pa u clipped. Raundi e zvogëlon imazhin e sfondit në mënyrë që të vendosë një numër të tërë herë në kuti.
• background-attachment
  • Një vlerë e re "lokale" shtohet në mënyrë që sfondi të lëvizë me përmbajtjen e elementit kur ky element ka një shirit lëvizës.
• sfond
  • Pronësia e stenografisë së sfondit shton në madhësinë dhe pronat e origjinës.

Prona të kufizuara CSS3

Në kufijtë CSS3 mund të jenë stilet për të cilat jemi përdorur (të ngurta, të dyfishta, të thyer etj.) Ose mund të jenë imazh. Plus, CSS3 sjell aftësinë për të krijuar qoshe të rrumbullakëta. Imazhet kufitare janë interesante sepse krijoni një imazh të të katër kufijve dhe më pas tregoni CSS se si ta aplikoni atë imazh në kufijtë tuaj.

Prona të reja të Border Style

Ka disa prona të reja kufitare në CSS3:

• Kufiri-rreze
  • kufiri i kufirit të lartë-djathtas , kufiri i poshtëm-djathtas-radius , kufiri i poshtëm-majtas-radius , kufiri i lartë-majtas-rreze
  • Këto prona ju lejojnë të krijoni qoshe të rrumbullakëta në kufijtë tuaj.
• Kufiri-image-source
  • Specifikon skedarin e burimit të imazhit që do të përdoret në vend të stileve të kufirit të përcaktuar tashmë.
• Kufiri-image-slice
  • Përfaqëson kompensimet e brendshme nga skajet e imazhit kufitar
• Kufiri-image-width
  • Përcakton vlerën e gjerësisë për imazhin tuaj kufitar.
• Kufiri-image-fillim
  • Specifikon shumën që zona e imazhit kufitar shtrihet përtej kutisë së kufirit.
• Kufiri-image-shtrirje
  • Përcakton se si palët dhe pjesët e mesme të imazhit të kufijve duhet të jenë të tiled ose të shkallëzuar.
• border-image
  • Pronë e shkurtër për të gjitha pronat e imazhit të kufijve.

Prona të tjera CSS3 të lidhura me kufijtë dhe sfondet

Kur një kuti është thyer në një ndërprerje të faqes, thyerja e kolonës për ndërprerjen e linjës (për elementët inline) prona e kuti-dekori-prishja përcakton se si kuti të reja janë të mbështjellë me kufij dhe mbushje. Sfondi mund të ndahet në mes të kutive të thyera të shumëfishta duke përdorur këtë pronë.

Ekziston gjithashtu një pronë kuti-hije që mund të përdoret për të shtuar hijet në elementet kuti.

Me CSS3, tani mund të vendosni me lehtësi një faqe Web me kolona të shumta pa tabela ose struktura të komplikuara të tagrave. Thjesht i thoni shfletuesit se sa kolona duhet të ketë elementi i trupit dhe sa të gjerë duhet të jenë. Plus, ju mund të shtoni kufijtë (rregullat), ngjyrat e sfondit që mbulojnë lartësinë e kolonës dhe teksti juaj do të rrjedhë automatikisht nëpër të gjitha kolonat.

CSS3 Columns - Përcaktoni numrin dhe gjerësinë e kolonave

Ekzistojnë tre prona të reja që ju lejojnë të përcaktoni numrin dhe gjerësinë e kolonave tuaja:

• kolonë gjerësi
  • Përcakton gjerësinë kolonat tuaja duhet të jenë. Shfletuesi pastaj rrjedh tekstin për të mbushur hapësirën me kolona të gjerë.
• kolona-numërimin
  • Përcakton numrin e kolonave në faqe. Shfletuesi pastaj do të krijojë kolona të mjaftueshme për t'u përshtatur në hapësirë, por vetëm numrin që specifikoni.
• kolona
  • Pronë e stenografisë ku mund të përcaktoni ose gjerësinë ose numrin (ose të dyja, por që rrallëherë kanë kuptim).

Hapësira dhe Rregullat e kolonës CSS3

Mangësitë dhe rregullat vendosen midis kolonave në të njëjtin skenar me shumë ngjyra. Mangësitë do të largojnë shtyllat, por rregullat nuk marrin ndonjë hapësirë. Nëse një rregull i kolonës është më i gjerë sesa boshllëku i tij, do të mbivendoset kolonat e afërta. ka pesë prona të reja për rregullat dhe boshllëqet e kolonave:

• kolonë-boshllëk
  • Përcakton gjerësinë e boshllëqeve midis kolonave.
• kolona-rregull-color
  • Përcakton ngjyrën e sundimit.
• kolona-rregull-style
  • Përcakton stilin e sundimit (të ngurta, me pikë, dyfish, etj).
• kolona-rregull-width
  • Përcakton gjerësinë e rregullave.
• kolona-Rregulli
  • Një pronësi stenografike që përcakton të tre vetitë e rregullave të kolonës në të njëjtën kohë.

CSS3 Column Breaks, Shtrirja e kolonave dhe mbushja e kolonave

Ndërprerjet e kolonës përdorin të njëjtat opsione CSS2 të përdorura për të përcaktuar thyerjet në përmbajtjen e faqës, por me tre prona të reja: pushim-para , ndërprerje dhe ndërprerje .

Ashtu si me tabelat, mund të vendosni elementë për të shpërndarë kolona me pronën e kolonës. Kjo ju lejon të krijoni tituj që përfshijnë shtylla të shumëfishta më shumë si një gazetë.

Kolonat e mbushjes vendos se sa përmbajtje do të jetë në secilën kolonë. Kolonat e ekuilibruar përpiqen të vënë të njëjtën sasi përmbajtjeje në secilën kolonë, derisa auto vetëm rrjedh përmbajtjen në derisa kolona të jetë e plotë dhe pastaj shkon në tjetrën.

Më shumë karakteristika në CSS3 që nuk janë përfshirë në CSS2

Ka shumë karakteristika shtesë në CSS3 që nuk ekzistonin në CSS2, duke përfshirë:

• Moduli i paraqitjes CSS Template dhe CSS3 Moduli i pozicionimit të rrjetit : Krijimi i rrjeteve me CSS.
• Moduli i tekstit CSS3 : Përcaktoni tekstin dhe madje krijoni hije me CSS.
• Moduli Color CSS3 : Tani me perde.
• Ndryshimet në modelin e kutisë : Përfshirja e një pronësu të marquee që vepron si tag IE.
• Moduli i Ndërfaqes së Përdoruesit CSS3 : Ju jep kursorë të rinj, përgjigje ndaj veprimeve, fushat e kërkuara, dhe madje edhe ndryshimin e elementeve .
• Pyetjet e mediave : Pyetjet e medias ju lejojnë më shumë fleksibilitet kur përcaktoni se si duhet përdorur një fletë stilesh. Për shembull, mund të përcaktoni një fletë stili që është vetëm për pajisjet me dorë që kanë një pikëpamje të madhe më të madhe se 20 orë.
• Moduli Rubin CSS3 : Ofron mbështetje për gjuhët që përdorin rubin tekstual për të shënuar dokumente.
• CSS3 Moduli Paged Media : Për më shumë mbështetje për mediat e paguara (letra, transparenca, etj).
• Përmbajtja e gjeneruar : L headers dhe footers, footnotes dhe përmbajtje të tjera që gjenerohen programatikisht, veçanërisht për mediat e paguara.
• Moduli i fjalorit CSS3 : Ndryshime në CSS.