Kuelewa mabadiliko makubwa kwa CSS3
Tofauti kubwa kati ya CSS2 na CSS3 ni kwamba CSS3 imegawanywa katika sehemu tofauti, inayoitwa modules. Kila moja ya modules hizi hufanya njia yake kupitia W3C katika hatua mbalimbali za mchakato wa mapendekezo. Utaratibu huu umefanya iwe rahisi kwa vipande mbalimbali vya CSS3 kukubalika na kutekelezwa katika kivinjari na wazalishaji tofauti.
Ikiwa unalinganisha mchakato huu na kile kilichotokea kwa CSS2, ambapo kila kitu kilichowasilishwa kama hati moja na taarifa zote za Nyaraka za Kisasa za Nyaraka ndani yake, unaanza kuona faida za kuvunja mapendekezo hadi vipande vidogo, vya kibinafsi. Kwa sababu kila moduli hutumika kwa kila mmoja, tuna aina nyingi za msaada wa kivinjari kwa modules CSS3.
Kama ilivyo na vipimo vipya na vya kubadilisha, hakikisha kuzingatia kurasa zako za CSS3 kabisa katika browsers nyingi na mifumo ya uendeshaji iwezekanavyo. Kumbuka lengo sio kuunda kurasa za wavuti ambazo zinaonekana sawa katika kivinjari kila, lakini ili kuhakikisha kwamba mitindo yoyote unayotumia, ikiwa ni pamoja na mitindo ya CSS3, inaonekana nzuri katika vivinjari ambavyo huwasaidia na kwamba hurudi kwa uzuri kwa browsers wakubwa ambao usitende.
Uchaguzi mpya wa CSS3
CSS3 hutoa rundo la njia mpya unaweza kuandika sheria za CSS na watoaji mpya wa CSS, pamoja na combinator mpya, na baadhi ya mambo mapya ya pseudo.
Wachaguzi watatu wa sifa:
- Ishara ya mwanzo inafanana na kipengele hasa [foo ^ = "bar"] Kipengele kina sifa inayoitwa foo inayoanza na "bar" mfano
- Ishirisha kumalizia mechi halisi [foo $ = "bar"] Kipengele kina sifa inayoitwa foo ambayo inaisha na "bar" mfano
- Tabia ina kipengele cha mechi [foo * = "bar"] Kipengele kina sifa inayoitwa foo iliyo na "bar" kamba
16 mpya ya pseudo-madarasa:
- : mizizi
- Kipengele cha mizizi cha waraka. Katika HTML hii daima.
- : nth-mtoto (n)
- Tumia hii ili kufanana na vipengele vya mtoto halisi au kutumia vigezo ili kupata mechi za kubadilisha.
- : nth-mwisho-mtoto (n)
- Tanisha vipengele vya watoto halisi vinavyotokana na mwisho.
- : nth-of-aina (n)
- Mechi za ndoa za ndugu na jina sawa kabla ya mti wa hati.
- : nth-last-of-type (n)
- Mechi za ndoa za ndugu na jina lile lililohesabu kutoka chini.
- : mtoto wa mwisho
- Changanya kipengele cha mwisho cha mtoto cha mzazi.
- : kwanza ya aina
- Changanya kipengele cha kwanza cha ndugu cha aina hiyo.
- : mwisho wa aina
- Changanya kipengele cha mwisho cha ndugu cha aina hiyo.
- : mtoto tu
- Changanya kipengele ambacho ni mtoto pekee wa mzazi wake.
- : tu ya aina
- Changanya kipengele ambacho ni cha pekee cha aina yake.
- : tupu
- Changanya kipengele ambacho hazina watoto (ikiwa ni pamoja nodes za maandishi).
- : lengo
- Changanya kipengele ambacho ni lengo la URI inayoelezea.
- : imewezeshwa
- Changanya kipengele wakati imewezeshwa.
- : wamezimwa
- Changanya kipengele wakati imezimwa.
- : hunakiliwa
- Changanya kipengele wakati inakaguliwa (kifungo cha redio au sanduku la kuangalia).
- : si (s)
- Mechi wakati kipengele hakifananishi na mchezaji rahisi.
Mchanganyiko mpya mpya:
- kipengeleA ~ kipengeleB
- Mechi wakati elementB ifuatavyo mahali fulani baada ya kipengeleA, si lazima mara moja.
Mali mpya
CSS3 pia ilianzisha idadi ya mali mpya za CSS. Malipo mengi haya yalitengeneza mitindo ya kuona ambayo inaweza kuhusisha zaidi na mpango wa graphics kama Photoshop. Baadhi ya haya, kama ya mpaka-radius au sanduku-kivuli, wamekuwa karibu tangu kuanzishwa kama CSS3. Wengine, kama Flexbox au hata Gridi ya CSS ni mitindo mapya ambayo bado huchukuliwa kuwa nyongeza za CSS3.
Katika CSS3, mfano wa sanduku haukubadilika. Lakini kuna aina ya vipya vya mtindo mpya ambazo zinaweza kukusaidia mtindo wa asili na mipaka ya masanduku yako.
Background nyingi Mimi mages
Kutumia picha ya historia, msimamo wa background, na mitindo ya kurudia nyuma unaweza kueleza picha nyingi za asili ili zimewekwa juu ya kila mmoja katika sanduku. Picha ya kwanza ni safu iliyo karibu na mtumiaji, na zifuatazo zimejenga nyuma. Ikiwa kuna rangi ya asili, ni rangi chini ya tabaka zote za picha.
Malipo ya Nyenzo Mpya
Pia kuna mali mpya ya asili katika CSS3.
- background-clip
- Mali hii inafafanua jinsi picha ya asili inapaswa kupunguzwa. Kikamilifu ni sanduku la mpaka, lakini inaweza kubadilishwa kwenye sanduku la sanduku au sanduku la maudhui.
- asili ya asili
- Mali hii huamua ikiwa historia inapaswa kuwa mahali katika sanduku la padding, sanduku la mpaka, au sanduku la maudhui.
- ukubwa wa nyuma
- Mali hii inakuwezesha kuonyesha ukubwa wa picha ya asili. Inakuwezesha kunyoosha picha ndogo ili kuzingatia ukurasa.
Mabadiliko kwa Mali za Kisasa za Nyama za Kale
Pia kuna mabadiliko machache kwenye mali za mtindo wa asili zilizopo:
- kurudia nyuma
- Kuna maadili mawili mapya kwa mali hii: nafasi na pande zote. Nafasi ya nafasi ya picha iliyofungiwa sawasawa ndani ya sanduku bila kupigwa. Pande zote zimehifadhi picha ya background ili itapiga mara nyingi katika sanduku.
- attachment background
- Thamani mpya "ya ndani" imeongezwa ili historia itafuatilia maudhui ya kipengele wakati kipengele hicho kina bar ya kitabu.
- background
- Hali ya chini ya mali inaongeza katika mali na ukubwa wa mali.
Malifa ya Mpaka wa CSS3
Katika mipaka ya CSS3 inaweza kuwa mitindo tunayotumiwa (imara, mara mbili, iliyopigwa, nk) au inaweza kuwa picha. Zaidi, CSS3 huleta uwezo wa kujenga pembe zilizozunguka. Picha za mipaka ni ya kuvutia kwa sababu unaunda picha ya mipaka yote minne na kisha uwaambie CSS jinsi ya kutumia picha hiyo kwa mipaka yako.
Malipo ya Sinema Mpya
Kuna baadhi ya mali mpya ya mpaka katika CSS3:
- mpaka-mpaka
- mpaka-juu-kulia-radius , mpaka-chini-kulia-radius , mpaka-chini-kushoto-radius , mpaka-juu-kushoto-radius
- Mali hizi zinakuwezesha kuunda pembe zilizozunguka kwenye mipaka yako.
- chanzo cha picha-mpaka
- Inatafanua faili ya chanzo cha picha kutumiwa badala ya mitindo ya mpaka ambayo imefafanuliwa.
- kipande cha picha ya mpaka
- Inaonyesha vituo vya ndani kutoka kwenye mipaka ya picha ya mpaka
- upana-picha-upana
- Inafafanua thamani ya upana kwa picha yako ya mpaka.
- mwanzo-picha-mwanzo
- Inabainisha kiasi ambacho eneo la picha ya mpaka linaendelea zaidi ya sanduku la mpaka.
- kunyoosha-picha-mpaka
- Inatafanua jinsi pande na sehemu za kati za picha ya mpaka zinapaswa kufungwa au kuziba.
- picha ya mpaka
- Mali ya kifupi ya mali zote za picha za mpaka.
Mali Zingine za CSS3 zinazohusiana na mipaka na asili
Wakati sanduku limevunjwa kwenye kuvunja ukurasa, safu ya safu ya mapumziko ya mstari (kwa vipengele vya ndani) mali ya sanduku-mapambo ya mapambo hufafanua jinsi sanduku jipya limefungwa na mipaka na padding. Mandhari inaweza kugawanywa kati ya masanduku mengi yaliyovunjika kwa kutumia mali hii.
Pia kuna mali ya kisanduku-kivuli ambayo inaweza kutumika kuongeza vivuli kwa vipengele vya sanduku.
Kwa CSS3, sasa unaweza kuanzisha urahisi ukurasa wa wavuti na nguzo nyingi bila meza au miundo ya vitambulisho ngumu. Unamwambia kivinjari jinsi safu nyingi ambazo kipengele cha mwili kinapaswa kuwa nacho na jinsi ambacho zinapaswa kuwa. Pia unaweza kuongeza mipaka (sheria), rangi ya asili ambayo huwa urefu wa safu, na maandishi yako yatapita kati ya nguzo zote moja kwa moja.
Nguzo za CSS3 - Fungua Nambari na Upana wa nguzo
Kuna mambo mapya matatu ambayo inakuwezesha kufafanua idadi na upana wa nguzo zako:
- safu-upana
- Inafafanua upana nguzo zako zinapaswa kuwa. Kivinjari kitasimamia maandishi ili kujaza nafasi na nguzo ambazo ni pana.
- kuhesabu safu
- Inatafanua idadi ya nguzo kwenye ukurasa. Kivinjari basi itaunda safu za kutosha kupatana na nafasi, lakini nambari tu unayoelezea.
- nguzo
- Mali ya shorthand ambapo unaweza kufafanua upana au namba (au wote wawili, lakini kwamba mara chache huwa na maana).
Mipaka na Kanuni za CSS3
Mapungufu na sheria zinawekwa kati ya nguzo katika mazingira sawa ya multicolumn. Mapungufu yatasukuma mbali nguzo, lakini sheria hazitachukua nafasi yoyote. Ikiwa utawala wa safu ni pana kuliko pengo, utaingilia kati nguzo zilizo karibu. kuna tano mali mpya kwa kanuni safu na mapungufu:
- safu-pengo
- Inafafanua upana wa mapungufu kati ya nguzo.
- rangi-utawala-rangi
- Inafafanua rangi ya utawala.
- mtindo wa utawala wa safu
- Inafafanua mtindo wa utawala (imara, unaojumuisha, mara mbili, nk).
- utawala-safu-utawala
- Inafafanua upana wa utawala.
- utawala wa safu
- Mali fupi inayofafanua mali zote za utawala wa safu mara moja.
Ufafanuzi wa Column ya CSS3, Nguzo za Kuangaza, na Nguzo za Kujaza
Mapumziko ya safu hutumia chaguo sawa za CSS2 kutumika kufafanua mapumziko katika maudhui yaliyotumiwa, lakini kwa mali tatu mpya: kuvunja-mbele , kuvunja-baada , na kuvunja-ndani .
Kama ilivyo na meza, unaweza kuweka vipengee ili kupangilia safu na mali ya safu-span. Hii inakuwezesha kuunda vichwa vya habari ambavyo vinaweka safu nyingi zaidi kama gazeti.
Kujaza nguzo huamua jinsi kiasi kitakavyokuwa kwenye safu kila. Nguzo za uwiano zinajaribu kuweka kiasi sawa cha maudhui katika kila safu wakati auto inapita tu maudhui mpaka mpaka safu imekamilika na kisha huenda kwenye inayofuata.
Features zaidi katika CSS3 Hiyo Aren & # 39; t Imejumuishwa katika CSS2
Kuna mengi ya vipengele vya ziada kwenye CSS3 ambazo hazikuwepo katika CSS2, ikiwa ni pamoja na:
- Moduli ya mpangilio wa Kigezo cha CSS na moduli ya kuweka nafasi ya Gridi ya CSS3 : Kujenga grids na CSS.
- Moduli ya Nakala CSS3 : Nakala ya nje na hata uunda vivuli vya CSS.
- Moduli ya Rangi ya CSS3 : Sasa kwa opacity.
- Mabadiliko kwenye mfano wa sanduku : Ikijumuisha mali ya marquee inayofanya kama alama ya IE.
- Moduli ya Interface ya Mtumiaji wa CSS3 : Kukupa cursor mpya, majibu kwa vitendo, mashamba zinazohitajika, na hata vipimo vya resizing .
- Maswali ya Vyombo vya habari : Maswali ya vyombo vya habari yanawawezesha kubadilika zaidi wakati wa kufafanua jinsi karatasi ya mtindo inapaswa kutumiwa. Kwa mfano, unaweza kufafanua karatasi ya mtindo ambayo ni kwa vifaa vya mkononi ambavyo vina picha kubwa zaidi ya 20m.
- Moduli ya Ruby ya CSS3 : Inatoa msaada kwa lugha ambazo hutumia ruby textual kufuta nyaraka.
- CSS3 Paged Media moduli : Kwa msaada zaidi zaidi kwa vyombo vya habari vya paged (karatasi, uwazi, nk).
- Maudhui yaliyotokana: L zinazoendesha kichwa na vidogo, maelezo ya chini, na maudhui mengine yanayotokana na programu, hasa kwa vyombo vya habari vya paged.
- Mchapishaji wa CSS3 : Mabadiliko ya CSS ya aural.