Nkọwapụta nke CSS

Kedu ihe ha bụ na ihe mere i ji eji ha

Nkọwapụta ndị ahịa CSS, nke a makwaara dị ka ma ọ bụ CSS prefixes nchọgharị, bụ ụzọ maka ndị na-eme nchọgharị ka ị gbakwunye nkwado maka atụmatụ CSS ọhụrụ tupu enwee nkwado zuru ezu na atụmatụ ndị a na ihe nchọgharị niile. Enwere ike ime nke a n'oge ụdị ule na oge nchọpụta ebe onye na-ahụ maka ihe nchọgharị na-achọpụta kpọmkwem otú a ga-esi mepụta atụmatụ CSS ọhụrụ ndị a. Ụdị ọkwa ndị a ghọrọ ezigbo ewu ewu na ịrị elu nke CSS3 afọ ole na ole gara aga.

Mgbe CCS3 na-ebute ụzọ, ọtụtụ ihe ndị nwere obi ụtọ malitere ịkụpụta ihe nchọgharị dị iche na oge dị iche. Dịka ọmụmaatụ, ihe nchọgharị weebụ na-akwado (Safari na Chrome) bụ ndị mbụ ịmebata ụfọdụ ụdị ihe omume dị ka mgbanwe na mgbanwe. Site na iji ngwaahịa ndị na-ere ahịa, ndị na-emepụta weebụ nwere ike iji atụmatụ ndị ọhụrụ ahụ rụọ ọrụ ha ma mee ka ha hụ na ihe nchọgharị ndị na-akwado ha ozugbo, kama ịnwe ichere maka onye ọ bụla na-eme nchọgharị iji nweta!

Ya mere, site na onye na-emepụta ihe na weebụ, a na-eji prefixes iji tinye atụmatụ CSS ọhụrụ na saịtị ma nwee nkasi obi n'ịmara na ndị nchọgharị ga-akwado ụdị ndị ahụ. Nke a nwere ike inye aka karịsịa mgbe ndị na-emepụta ihe nchọgharị dị iche iche mejuputara ngwà na ụzọ dị iche iche ma ọ bụ dị iche iche syntax.

Nkọwapụta nchọgharị CSS nke ị nwere ike iji (nke ọ bụla n'ime ha bụ ihe nchọgharị dị iche) bụ:

N'ọtụtụ ọnọdụ, iji ngwaahịa ọhụrụ CSS, ị na-ewere ụlọ ọrụ CSS ahụ ma tinye mgbakwunye maka ihe nchọgharị ọ bụla. Ụdị nsụgharị ndị a ga-ebute ụzọ (mgbe ọ bụla ị ga - ahọrọ) mgbe nkịtị CSS ga - abịa. Dịka ọmụmaatụ, ọ bụrụ na ịchọrọ ịgbakwunye CSS3 mgbanwe na akwụkwọ gị, ị ga-eji ihe mgbanwe dị ka egosiri n'okpuru:

-agbanye ihe ntinye aka: 4s niile nwere ike;
-moz- transition: niile 4s nwere ike;
-ms- transition: niile 4s mfe;
-agbanwe : ihe niile dị 4s;
mgbanwe: 4s niile nwere ike;

Cheta: Cheta na ụfọdụ ndị nchọgharị nwere syntax dị iche iche maka ụfọdụ ihe onwunwe karịa ndị ọzọ, ya mere echela na ụdị ihe nchọgharị nke ihe onwunwe bụ otu ihe ahụ dị ka ihe onwunwe. Dịka ọmụmaatụ, iji mepụta CSS gradient , ị na-eji ala linear-gradient. Firefox, Opera, na nsụgharị nke Chrome na Safari jiri akụ ahụ na prefix kwesịrị ekwesị mgbe nsụgharị Chrome na Safari jiri ihe onwunwe mbụ -webkit-gradient. Ọzọkwa, Firefox na-eji ụkpụrụ dị iche iche karịa ihe ndị dị na ya.

Ihe mere na ị na-agwụcha nkwupụta gị mgbe niile, nke CSS bụ nke a na-adịghị edebere ya na ya bụ na mgbe ihe nchọgharị na-akwado nkwado ahụ, ọ ga-eji nke ahụ. Cheta otu esi agụ CSS. Iwu ndị na-esote na-ebute ụzọ karịa ndị mbụ ma ọ bụrụ na nkọwa ahụ bụ otu, ya mere, ihe nchọgharị ga-agụ usoro mbipụta nke usoro iwu ma jiri ya ma ọ bụrụ na ọ kwadoghị ekwesighi, ma ozugbo ọ ga-eme ya, ọ ga-eme ka onye na-ere ahịa sụgharịa ya. ndị isi CSS na-achị.

Ndị na-ere ahịa abụghị ndị na-agba ọsọ

Mgbe mbụ e webatara ndị na-ere ahịa, ọtụtụ ndị ọkachamara na weebụ na-eche ma ọ bụ na ha bụ mbanye ma ọ bụ na-agbanweghachi azụ n'oge ọjọọ nke ịgba koodu nke weebụsaịtị iji kwado ihe nchọgharị dị iche iche (cheta ndị " A na-elele saịtị a kachasị mma na ozi IE "). Ndị na-ere ahịa CSS bụ ndị na-ere ahịa abụghị ihe hacks, ma, ị gaghị enwekwa ohere maka iji ha n'ọrụ gị.

A CSS mbanye anataghị ikike na-ezighị ezi na mmejuputa nke ọzọ mmewere ma ọ bụ ihe onwunwe iji nweta ihe onwunwe ọzọ na-arụ ọrụ n'ụzọ ziri ezi. Dịka ọmụmaatụ, igbe nlele igbe ahụ mebiri njirimara na njedebe nke ụlọ olu-ezinụlọ ma ọ bụ otú nchọgharị browsers parse backslashes (\). Ma eji hacks dozie nsogbu nke ọdịiche dị n'etiti ụzọ Internet Explorer 5.5 si edozi igbe igbe ahụ na otú Netscape si kọwaa ya, na enweghị ihe jikọrọ ya na ụdị ụda olu. Obi dị m ụtọ na ndị a nchọgharị abụọ a bụ ndị anyị na-adịghị echegbu onwe anyị ụbọchị ndị a.

Ihe ntinye nke ahia abụghị mbanye anataghị ikike n'ihi na ọ na-enye ohere nkọwapụta iwu iwu maka otu esi etinye ihe onwunwe, ma n'otu oge ahụ na-ekwe ka ndị na-eme nchọpụta mejuputa ihe onwunwe n'ụzọ dị iche na-agbasaghị ihe ọ bụla ọzọ. Ọzọkwa, nkọwa ndị a na-arụ ọrụ CSS nke ga-emesị bụrụ akụkụ nke nkọwapụta . Anyị na-agbakwunye koodu ụfọdụ iji nweta ohere ngwa ngwa. Nke a bụ ihe ọzọ mere ị ga - eji kwụsị ọrụ CSS na - achịkwa ya. N'ụzọ dị otú a, ị nwere ike idebe nsụgharị ndị a na-edebere tupu ha enweta nkwado nkwado zuru ezu.

Achọrọ ịmara ihe nkwado ntanetị maka otu atụmatụ bụ? Mkpokọta website CanIUse.com bụ ihe magburu onwe ya maka ikpokọta ozi a ma mee ka ị mara ndị nchọgharị, na nsụgharị nke ndị nchọgharị ahụ, na-akwado atụmatụ ugbu a.

Nkọwapụta ndị na-ere ahịa bụ ihe na-adịghị mma ma dị nwa oge

Ee, o nwere ike iche na iwe na ugboro ugboro iji dee ihe onwunwe 2-5 ugboro iji mee ka ọ rụọ ọrụ na ihe nchọgharị niile, mana ọ bụ ọnọdụ oge na-adịghị. Dịka ọmụmaatụ, nanị afọ ole na ole gara aga, ịtọ otu akụkụ gbara gburugburu na igbe ị dere:

-moz-border-radius: 10px 5px;
-onye mgbago-elu-elu-aka ekpe: 10px;
-obodo -obodo-n'elu-nri-radius: 5px;
-agbụ ọkụ na-adabere na ala-ala-aka nri: 10px;
-agbanye mgbidi-ala-ala-ekpe-aka: 5px;
radius ókè-ala: 10px 5px;

Mana ugbu a, ndị nchọgharị ahụ abiala akwado atụmatụ a, naanị ị chọrọ nsụgharị nke a:

radius ókè-ala: 10px 5px;

Chrome akwadola CSS3 ihe onwunwe kemgbe version 5.0, Firefox gbakwunyere ya na version 4.0, Safari kwukwara ya na 5.0, Opera na 10.5, iOS na 4.0, na Android na 2.1. Ọbụna Internet Explorer 9 na-akwado ya na-enweghị prefix (na IE 8 na ala adịghị akwado ya na ma ọ bụ na-enweghị prefixes).

Cheta na ihe n 'emeputa ihe omuma ihe a ga - achogharia na ihe ndi ozo ga - achoro ma oburu na i na - eme atụmatụ ime ulo ozo nke di otutu oge gara aga. N'ikpeazụ, idebe ihe nchọgharị na-adị mfe karịa ịchọta ma jiri njehie nke ga-edozi na ọdịdị n'ọdịnihu, na-achọ ka ịchọta njehie ọzọ iji mee ihe na ihe ndị ọzọ.