Bambanci tsakanin CSS2 da CSS3

Fahimtar manyan canje-canje zuwa CSS3

Babban bambanci tsakanin CSS2 da CSS3 shi ne cewa an raba CSS3 zuwa sassa daban-daban, ana kiran kayayyaki. Kowane ɗayan waɗannan matakan yana yin hanyar ta W3C a wasu matakai na tsari na shawarwarin. Wannan tsari ya sanya sauƙin sauƙi ga ƙananan CSS3 da za a karɓa kuma a aiwatar da su a cikin mai bincike ta hanyar masana'antun daban.

Idan ka kwatanta wannan tsari ga abin da ya faru da CSS2, inda duk aka ƙaddamar da shi a matsayin takarda guda ɗaya tare da duk bayanan Cascading Style Sheets a ciki, za ka fara ganin kyawawan abubuwan da ka karya shawarar ɗin zuwa ƙarami, kowane ɗayan. Saboda kowane abu yana aiki a kowanne ɗayan, muna da fifiko mai yawa na tallafin mai bincike don hanyoyin CSS3.

Kamar yadda aka saba da sabon bayani, tabbatar da tabbatar da shafukan yanar gizo na CSS3 sosai a matsayin masu bincike da tsarin aiki kamar yadda zaka iya. Ka tuna cewa makasudin ba shine ƙirƙirar shafukan yanar gizo waɗanda suke kallon daidai ba a kowane bincike, amma don tabbatar da cewa kowane salon da kake amfani da su, ciki har da tsarin CSS3, duba mai kyau a cikin masu bincike da ke goyan bayan su sannan kuma su koma baya ga masu bincike da suka wuce kar ka.

Sabon Zaɓaɓɓun CSS3

CSS3 yana bada bunch of sababbin hanyoyin da za ku iya rubuta dokoki CSS tare da sababbin masu zaɓin CSS, da kuma sabon mai haɗawa, da wasu sababbin abubuwa.

Sakamakon sabon saiti uku:

• Sakamakon fara matakan daidai kashi [foo ^ = "bar"] Haɗin yana da sifa wanda ake kira foo wanda ya fara da "bar" misali
• Sakamakon haɓaka yana daidaita daidai nau'i [foo $ = "bar"] Haɗin yana da alamar da aka kira mai kira wanda ya ƙare tare da "bar" misali
• Halayen ya ƙunshi nau'in wasan [foo * = "bar"] Ra'ayin yana da alamar da aka kira mai suna wanda ya ƙunshi sakon "bar" misali

16 sababbin kundin jinsi:

• : tushen
  • Tushen tushen daftarin aiki. A HTML wannan shi ne koyaushe.
• : nth-yaro (n)
  • Yi amfani da wannan don daidaita ainihin abubuwa na yara ko amfani da canje-canje don samun matakan haɓaka.
• : nth-last-child (n)
  • Daidaita ainihin abubuwan da yaran yara ke ƙidayar daga ƙarshe.
• : nth-of-type (n)
  • Daidaita abubuwan zumunta tare da sunan daya kafin shi a cikin sashin layi.
• : nth-of-type (n)
  • Sakamakon abubuwa masu dangantaka tare da wannan sunan yana ƙidaya daga ƙasa.
• : karshe-yaro
  • Yi dace da ɗayan yaro na ƙarshe na iyaye.
• : na farko-na-iri
  • Yi la'akari da kashi ɗaya na farko na irin wannan.
• : karshe-of-type
  • Daidaita kashi na karshe na wannan nau'in.
• : kawai-yaro
  • Yi la'akari da kashi wanda shine kawai yaron iyayensa.
• : kawai-na-type
  • Daidaita kashi wanda shine kawai daga irinta.
• : komai
  • Daidaita kashi wanda ba shi da yara (ciki har da rubutun rubutu).
• : Target
  • Daidaita wani ɓangaren da ke da manufa na mai amfani URI.
• : kunna
  • Daidaita kashi yayin da aka kunna.
• : An kashe
  • Daidaita kashi yayin da ta kashe.
• : bincika
  • Daidaita kashi yayin da aka duba shi (maɓallin rediyo ko akwati).

• : ba (s)
  • Daidaita lokacin da kashi bai dace da mai sauƙi mai sauƙi s.

Ɗaya daga cikin sababbin masu hada kai:

• elementA ~ elementB
  • Daidaita lokacin da kashiB ya bi wani wuri bayan elementA, ba dole ba ne nan da nan.

New Properties

CSS3 kuma ya gabatar da sababbin sababbin kamfanonin CSS. Da yawa daga cikin waɗannan kaddarorin sun kirkiro hanyoyi masu gani wanda zai iya haɗawa tare da shirin hotunan kamar Photoshop. Wasu daga cikin wadannan, kamar radius ko akwatin-inuwa, sun kasance tun daga lokacin gabatarwa idan CSS3. Sauran, kamar flexbox ko ma CSS Grid sune sababbin sifofin da aka yi la'akari da su har zuwa CSS3 tarawa.

A CSS3, samfurin akwatin bai canza ba. Amma akwai nau'i na sabon kayan kaya waɗanda zasu iya taimaka maka wajen tsara yanayin da ke kan iyakokin ku.

Maɗaukaki Bayanin Na Mages

Amfani da bayanan hoton, matsayi na baya, da kuma maimaitawa na baya-bayanka za ka iya siffanta hotunan hotunan da za a kwance a kan juna a akwatin. Hoto na farko shine Layer mafi kusa da mai amfani, tare da waɗannan masu biyo baya. Idan akwai launin launi, ana fentin shi a kasa duk hotunan hoton.

New Properties Style Properties

Har ila yau, akwai wasu kaddarorin sabon bayanan CSS3.

• bayanan bayanan
  • Wannan dukiya ta bayyana yadda za'a zartar da hoton bayanan. Asalin ita ce akwatin iyaka, amma ana iya canzawa zuwa akwatin ƙusa ko akwatin abun ciki.
• asali-asali
  • Wannan dukiya ya ƙayyade ko bayanan ya zama wuri a cikin akwati, ko akwatin da ke ciki.
• Girman girma
  • Wannan dukiya yana ba ka damar nuna girman girman hoto. Yana ba ka damar ƙaddamar da ƙananan hotuna don dacewa da shafin.

Canje-canje ga Tsarin Halin Gidan Tsarin Hanya

Haka kuma akwai wasu canje-canje zuwa abubuwan da suka dace na kaya na yanzu:

• baya-maimaita
  • Akwai sababbin dabi'u guda biyu don wannan dukiya: sarari da zagaye. Space sarari da hoton da aka yi a ciki a cikin akwatin ba tare da an cire shi ba. Zagaye ya sauya bayanan hotunan don ya samo cikakken adadi a cikin akwatin.
• Abubuwan da aka haɗe
  • An kara sabon "ƙananan" sabon wuri domin tushen zai gungurawa tare da abun ciki yayin da wannan ɓangaren yana da maɓallin gungurawa.
• bayanan
  • Ƙididdigar kayan gida na baya yana ƙara a cikin girman da asali.

CSS3 Yankunan Border

A cikin iyakokin CSS3 zai iya kasancewa salon da muke amfani dasu (m, dual, dashed, da dai sauransu) ko kuma su iya zama hoton. Bugu da ƙari, CSS3 yana haifar da ikon ƙirƙirar sasanninta. Hotuna masu shinge suna da ban sha'awa saboda ka ƙirƙiri hoto na dukkan iyakoki hudu sannan ka gaya wa CSS yadda ake amfani da wannan hoton zuwa ga iyakokinka.

Sabbin Yanayin Yanayin Border

Akwai wasu kaya na sabon iyaka a CSS3:

• radiyar iyaka
  • radius-hagu-radius , iyaka-hagu-dama-radius , radiyar hagu-ƙasa-hagu-radius , hagu-hagu-hagu-radius
  • Wadannan kaddarorin sun baka damar ƙirƙirar sasanninta a kan iyakokinku.
• asalin alamar yanayin iyaka
  • Ya ƙayyade fayil din fayil don amfani da ita maimakon maimakon iyakokin da aka rigaya an riga an riga aka bayyana.
• yanki-iyaka
  • Ya nuna alamomin ciki daga gefuna na gefen iyaka
• Alamar iyaka-iyaka
  • Ƙayyade darajar nisa don image ta gefenku.
• Ƙaddamar da yanayin iyaka
  • Ya ƙayyade adadin da tashar gefen gefen iyaka ya ƙetare bayan akwatin akwatin.
• Alamar kan iyaka-stretch
  • Ƙayyade yadda za a tilasta ɓangarori da ɓangarorin tsakiya na image ta gefen ko ƙaddara.
• image-iyaka
  • Abubuwan da aka ba da dama ga dukan dukiyar tallan gefen.

Ƙarin CSS3 Properties dangane da Borders da Bayani

Lokacin da akwatin ya fashe a wani shafi na shafi, ragar shafi don kwance na layi (don abubuwan haɗe-haɗe) haɗe-haɗe-haɗe-haɗe-haɗe na ƙayyade yadda aka saba sa sababbin kwalaye da iyakoki da katako. Ƙarin bayanan za a iya raba tsakanin ƙananan akwati da aka yi amfani da wannan kayan.

Akwai kuma akwatin kayan inuwa-inuwa wanda za'a iya amfani dashi don ƙara inuwa zuwa abubuwan da ke cikin akwatin.

Tare da CSS3, yanzu zaka iya kafa shafin yanar gizon tare da ginshiƙai masu yawa ba tare da tebur ko rikitarwa ba. Ka kawai gaya wa mai binciken yadda yawancin ginshiƙan jikin jiki ya kamata da yadda zazzabi ya kamata. Ƙari za ka iya ƙara iyakoki (dokoki), launuka masu launin da suka ɗora tsawo na shafi, kuma rubutu zai gudana ta cikin dukkan ginshiƙai ta atomatik.

Taswirar CSS3 - Ƙayyade Lambar da Girma na ginshiƙai

Akwai sababbin abubuwa uku waɗanda ke ba ka izinin ayyana lambar da nisa daga ginshiƙanka:

• Gurbin-nisa
  • Ya bayyana iyaka da ginshiƙan ku. Sannan mai bincike zai gudana da rubutu don cika filin tare da ginshiƙan da suke da faɗi.
• Ƙididdiga-shafi
  • Ya bayyana adadin ginshiƙai a shafin. Sannan mai bincike zai kirkiro ginshiƙai don isa cikin sarari, amma kawai lambar da kuka saka.
• ginshiƙai
  • Abubuwan gajeren wuri inda zaka iya ayyana ko dai nisa ko lambar (ko biyu, amma wannan yana da hankali).

CSS3 Kayan Ginshiki da Dokokin

Ana sanya gabobin da dokoki a tsakanin ginshikan a cikin wannan labari. Gabobin za su kaddamar da ginshiƙai, amma dokoki ba su karbi kowane wuri ba. Idan tsarin shafi ya fi fadi, sai ya sake ɓoye ginshiƙan da ke kusa. akwai sababbin kaya guda biyar don ka'idojin shafi da raguwa:

• ramin-shafi
  • Ya danganta da nisa daga cikin ramin tsakanin ginshiƙai.
• launin-launi-launi
  • Ma'anar launi na mulkin.
• tsarin-shafi-rukuni
  • Faɗakar da salon salon mulki (m, cikakke, sau biyu, da dai sauransu).
• Ƙididdiga-rukunin-shafi
  • Ya bayyana iyakar mulkin.
• shafi-shafi
  • Abubuwan da ke cikin gajeren dukiya suna fassara dukkanin mallakar mallaka guda uku a duk lokaci.

CSS3 Ƙunƙyukan Labaran, Maƙallan Bayani, da Ginshiƙun Maɗallan

Kuskuren shafi yana amfani da irin wannan CSS2 zaɓuɓɓuka da aka yi amfani da su wajen ƙaddamar da karya a cikin abun ciki, amma tare da sababbin abubuwa uku: fashewa-kafin , hutu , da karya-ciki .

Kamar da Tables, za ka iya saita abubuwan da za su yi amfani da ginshiƙai tare da dukiyar da aka sanya ta shafi. Wannan yana ba ka damar ƙirƙirar ƙididdiga wanda ya ninka ginshiƙai masu kama da jarida.

Cika ginshikan yana ƙayyade yawan abun ciki zai kasance a cikin kowane shafi. Tsakanin ginshiƙai suna kokarin gwada adadin abun ciki a cikin kowane shafi yayin da auto ke gudana abubuwan ciki har sai mahafin ya cika sannan sannan zuwa na gaba.

Karin Ƙari a CSS3 Wannan Aren & Nbsp; T Ya hada da CSS2

Akwai wasu ƙarin fasali a cikin CSS3 waɗanda basu wanzu a CSS2, ciki har da:

• CSS Ƙaddamarwa na samfurin da kuma CSS3 Grid positioning module : Samar da grids tare da CSS.
• CSS3 Rubutun rubutu : Rubutun rubutu da ma haifar da inuwa tare da CSS.
• CSS3 Color module : Yanzu tare da opacity.
• Canje-canje ga samfuri na akwatin : Ya hada da dukiyar da ke da alaƙa wanda ke kama da IE tag.
• CSS3 Cibiyar Intanet mai amfani : Ba ka sabon siginan kwamfuta, amsoshin ayyuka, wurare da ake buƙata, har ma da maimaita abubuwa .
• Binciken Watsa Labaru : Tambayoyi na Media sun ba ka damar sauƙi yayin da kake bayanin yadda za'a yi amfani da takarda. Alal misali, za ka iya ayyana takarda da ake amfani dasu kawai don na'urori masu hannu wanda ke da tashar jiragen sama fiye da 20m.
• CSS3 Ruby module : Yana bayar da tallafi ga harsuna da suke amfani da rubutun rubutun don annotate takardu.
• CSS3 Kaddamar da Kwaskwarimar Ƙwaƙwalwar Intanet : Don ƙarin tallafi ga kafofin watsa labaru (takarda, transparencies, da dai sauransu).
• Ƙirƙirar abubuwan da ke ciki : L masu gujewa da ƙafafunni, alamomi, da sauran abubuwan da aka samar da kayan aiki, musamman ga magungunan da aka lalata.
• CSS3 Jagoran bayani : Canje-canje zuwa CSS.