CSS-də yerli dəyişənlər. Vaxtdır…. CSS-də dəyişənlər Niyə CSS dəyişənlərini öyrənin
Layihə böyüdükcə onun CSS faylları böyüyür və tıxanır. CSS dəyişənləri bununla məşğul olmaqda sizə kömək edə bilər, onlar təkrarlanan CSS xassələrindən təkrar istifadə etməyə imkan verir;
Əvvəllər dəyişənlər yalnız Less və ya Sass-da istifadə oluna bilərdi, lakin bunlar preprosessorlardır və istifadə etməzdən əvvəl tərtib etməyi tələb edirlər. Dəyişənlər indi təmiz CSS-də mövcuddur.
CSS-də dəyişənlərin elan edilməsi və istifadəsi
CSS-dəki dəyişənlər adi CSS qaydaları ilə eyni məhdudiyyətlərə və irsiyyət qaydalarına tabedir. Onlardan istifadə etməyin ən asan yolu onları psevdo sinifdə qlobal olaraq elan etməkdir :kök, ona görə də bütün digər seçicilər onu miras ala bilər.
:root( --awesome-mavi: #2196F3; )
Bir dəyişənin dəyərinə daxil olmaq üçün konstruksiyadan istifadə etməlisiniz var(…). Nəzərə alın ki, adlar hərflərə həssasdır, yəni. --foo!= --FOO.
Bəzi element (fon rəngi: var(--awesome-mavi); )
Dəstək
Firefox hazırda CSS dəyişənlərini dəstəkləyir. Google Chrome 49 və daha sonrakı versiyalarda bu funksiya aktivdir, əgər siz 48 və ya daha köhnə versiyadan istifadə edirsinizsə, bura daxil olaraq dəstəyi əl ilə aktivləşdirə bilərsiniz. chrome://bayraqlar/ və yandırın Eksperimental Veb Platforma funksiyalarını aktivləşdirin.
Nümunə 1 - Rəng sxemləri
CSS-dəki dəyişənlər eyni xassəni müxtəlif elementlərə, məsələn, mövzuda rənglərin təkrarlanması kimi tətbiq etmək lazım olduqda faydalıdır. Bizə lazım olan hər yerdə eyni rəngi kopyalamaq əvəzinə, dəyişəndən istifadə edə bilərik.
İndi, əgər müştəri səhifədəki rəngi dəyişmək istəyirsə, bir sətri (dəyişən bəyan xətti) dəyişdirərək bütün üslubu dəyişə bilərik. Dəyişənlər olmasaydı, bu rəngin istifadə olunduğu bütün yerləri dəyişməli olardıq.
Misal 2 - Mürəkkəb xassələrin adlarını təmizləyin
CSS dəyişənlərinin təmin etdiyi başqa bir əla xüsusiyyət, mürəkkəb bir xüsusiyyəti qısa, dostluq adı arxasında gizlətməkdir. Yaxşı bir nümunə çoxlu parametrləri olan CSS xassələridir, məsələn: qutu kölgəsi, çevirmək Və şrift.
Dəqiq adı olan dəyişəni elan etməklə, mürəkkəb xassəni təhlil etməyə vaxt itirmədən ondan istifadə edə bilərik.
Misal 3 - Dinamik Dəyişənlər
Dəyişən bir neçə dəfə elan edildikdə, ona standart CSS miras qaydaları tətbiq edilir. Aşağıdakı nümunə kodunuzu qısa və təmiz saxlayarkən istifadəçi hərəkətləri əsasında xassələri necə dinamik şəkildə idarə edə biləcəyinizi nümayiş etdirir.
Yaşıl və mavi bloklara işarə edin.
Nəticə
Gördüyünüz kimi, dəyişənlərdən istifadə etmək olduqca asandır və mütləq sınamağa dəyər. Diqqət yetirməli olduğumuz daha bir neçə şeyə baxaq:
- var() funksiyasının ikinci parametri var, əgər dəyişən xəta atırsa, dəyər kimi istifadə olunacaq: width: var(--custom-width, 20%);
- Öz qaydanızı elan edərkən siz dəyişənlərdən də istifadə edə bilərsiniz: --base-color: #f93ce9; --background-gradient: linear-gradient(yuxarıya, var(--base-color), #444);
- Dəyişənlər başqa bir CSS yeniliyi olan calc() funksiyası ilə istifadə edilə bilər. Lakin bu, indiyə qədər yalnız Firefox-da işləyir: --container-width: 1000px; maksimum genişlik: calc(var(--container-width) / 2);
Hamısı budur! CSS dəyişənlərindən istifadə etməyə çalışın, lakin hələlik ciddi layihələrdə onlardan qaçın.
CSS dəyişənləri, daha dəqiq desək, fərdi CSS xassələri Chrome-da 49-cu versiyadan bəri mövcuddur. Onlar CSS-də təkrarlanan kodun miqdarını azaltmaq, mövzuları tez dəyişdirmək kimi təsirli effektlər yaratmaq və gələcək CSS xüsusiyyətləri üçün potensial olaraq polifill yaratmaq üçün faydalı ola bilər.
CSS-də xaos
Tətbiq hazırlayarkən ümumi təcrübə ardıcıl üslubu qorumaq üçün istifadə ediləcək marka rəngləri dəsti yaratmaqdır. Təəssüf ki, bu rəngləri CSS-də təkrar-təkrar istifadə etmək təkcə iş deyil, həm də səhvlərin baş verməsinə şərait yaradır. Əgər bir anda rənglərdən birini dəyişdirmək lazımdırsa, tərtibatçı səhvən bütün sənəd boyu axtarış və dəyişdirmə funksiyalarından istifadə edə bilər ki, bu da böyük bir layihədə olduqca təhlükəli ola bilər.
Bu yaxınlarda bir çox tərtibatçı dəyişənlərdən istifadə edərək bu problemi həll edən SASS və ya LESS kimi CSS preprosessorlarından istifadə etməyə başladı. Bu alətlər inkişaf məhsuldarlığını xeyli artırsa da, preprosessor dəyişənlərinin çox ciddi çatışmazlığı var: onlar statikdir və tez dəyişdirilə bilməz. Dəyişənləri dinamik şəkildə dəyişmək imkanı təkcə saytınızın və ya tətbiqinizin mövzusunu tez bir zamanda dəyişməyə imkan vermir, həm də cavab verən dizayn imkanlarının əhəmiyyətli dərəcədə genişlənməsi və gələcək CSS xassələri üçün çoxlu doldurma yaratmaq imkanı deməkdir. Chrome 49-un buraxılması ilə dəyişənlər fərdi CSS xassələri kimi əlçatan oldu.
Bir sözlə fərdi xüsusiyyətlər
Xüsusi xüsusiyyətlər CSS alət dəstimizi iki yeni xüsusiyyətlə genişləndirir:
- Kodun müəllifi onun icad etdiyi adlarla xassələrə ixtiyari dəyərlər təyin edə bilər.
- var() funksiyası bu dəyərlərin digər xassələrdə istifadə edilməsinə imkan verir.
Göstərmək üçün qısa bir nümunə:
:root ( --main-color: #06c ; ) #foo h1 (rəng: var (--main-color); )var() funksiyası fərdi xüsusiyyətin dəyərini qaytarır və onunla əvəz olunur, nəticədə rəng: #06c; . Fərdi xassə stil cədvəlində haradasa müəyyən edilibsə, o, var funksiyası üçün əlçatan olacaq.
İlk baxışdan sintaksis qəribə görünə bilər. Bir çox tərtibatçı təəccüblənir: "Niyə yalnız dəyişən adlar kimi $foo istifadə etmirsiniz?" Bu, çevikliyi və gələcəkdə $foo üçün makro yaratmaq qabiliyyətini artırmaq üçün xüsusi olaraq edildi. Bu barədə ətraflı məlumatı spesifikasiyanın müəlliflərindən biri Tab Atkinsin məqaləsində oxuya bilərsiniz.
Fərdi xüsusiyyətlər üçün sintaksis
Xüsusi xüsusiyyətlər üçün sintaksis olduqca sadədir:
Başlıq -rəng: #06c ;
Nəzərə alın ki, fərdi xüsusiyyətlər hərflərə həssasdır, yəni --header-color və --Header-Color iki fərqli xüsusiyyətdir. Sintaksis ilk baxışda sadə görünsə də, əslində bir az iş görməyə imkan verir. Məsələn, aşağıda etibarlı xüsusi mülkiyyət nümunəsi verilmişdir:
--foo: əgər (x > 5 ) this.width = 10 ;
Bu ifadə dəyişən kimi işləməsə də (hər hansı adi xüsusiyyət üçün etibarlı dəyər olmayacaq), o, potensial olaraq JavaScript istifadə edərək tez oxuna və işlənə bilər. Bu o deməkdir ki, fərdi xüsusiyyətlər cari CSS preprosessorlarında mövcud olmayan hər cür maraqlı texnikaları aça bilər. Beləliklə, əgər siz əsnəyirsinizsə və "Kimin fərqinə varır, məndə SASS var..." kimi bir şey düşünürsünüzsə, bir daha düşünün! Bunlar işləməyə öyrəşdiyiniz dəyişənlər deyil.
Kaskad
Fərdi xassələr standart kaskad qaydalarına əməl edir, beləliklə siz eyni xassəni müxtəlif spesifiklik səviyyələrində müəyyən edə bilərsiniz:
:root ( --color: blue; ) div ( --color: green; ) #alert ( --color: red; ) * ( color: var(--color); )<p> Rəngim mavidir, kökdən miras qalmışdır!p> <div > Və mənim üçün yaşıl rəngə çevrildi!div > <div id="alert" > Yaxşı, mənim üçün qırmızıdır!<p> Və mənim üçün qırmızı: miras səbəbiylə!p> div >
Bu o deməkdir ki, cavab verən dizaynı idarə etmək üçün media ifadələrində xüsusi xassələrdən istifadə edə bilərsiniz. Ekran ölçüsü artdıqca əsas struktur elementlərdən xarici kənarların artırılması istifadə nümunəsi ola bilər:
:root ( --gutter : 4px ; ) bölmə ( kənar : var (--gutter); ) @media (min-en: 600px ) ( :root ( --gutter : 16px ; ) )Qeyd etmək lazımdır ki, yuxarıdakı texnika CSS preprosessorlarından istifadə etməklə təkrarlana bilməz, çünki onlar media ifadələrində dəyişənləri ləğv edə bilmirlər. Bu fürsətin böyük potensialı var!
Dəyərini digər xüsusi xassələrdən alan xüsusi xassələrdən istifadə etmək də mümkündür. Bu mövzuları fərdiləşdirmək üçün çox faydalı ola bilər:
:kök (--əsas-rəng: qırmızı; --loqo-mətn: var (--əsas-rəng); )var() funksiyası
Fərdi mülkiyyətin dəyərini əldə etmək və istifadə etmək üçün var() funksiyası lazımdır. Budur onun sintaksisi:
var (Burada
Bu texnika xüsusilə Shadow DOM-dan istifadə edən veb komponentlərinin dizaynı üçün faydalıdır, çünki fərdi xüsusiyyətlər kölgə sərhədlərini keçə bilər. Veb komponentinin müəllifi ehtiyatlardan istifadə edərək ilkin dizayn yarada və sonra fərdi xassələrdən istifadə edərək üslubları tənzimləyə bilər:
<x-foo >#kölgə<üslub > p (fon rəngi: var (--mətn-fon, mavi); )üslub > <p> Bu mətndə sarı fon var, çünki sənəddə belə yazılıb! Əks halda mavi olardı.p> x-foo >/* Əsas tətbiq üslublarında: */ x-foo ( --text-background: yellow; )var() istifadə edərkən nəzərə alınmalı olan bir neçə şey var. Məsələn, dəyişənlər əmlak adları ola bilməz:
.foo ( --yan : kənar-üst; var (--yan): 20px ; )Bu, margin-top təyin etməyə bərabər deyil: 20px; . Üstəlik, ikinci bəyannamə etibarlı deyil və səhv salacaq.
Eyni şəkildə, hissəsi dəyişəndən alınan bir dəyər yaratmaq mümkün deyil:
.foo ( --boşluq : 20 ; margin-top : var (--boşluq)px ; )Bu, həmçinin margin-top üçün ekvivalent deyil: 20px; . Dəyəri toplamaq üçün sizə başqa bir şey lazımdır: calc() funksiyası.
calc() ilə dəyərlər yaratmaq
Əgər əvvəllər onunla işləməmisinizsə, calc() funksiyası CSS-də dəyərləri müəyyən etmək üçün hesablamalar aparmağa imkan verən kiçik, lazımlı bir vasitədir. Bütün müasir brauzerlər tərəfindən dəstəklənir və yeni dəyərlər yaratmaq üçün xüsusi xüsusiyyətlərlə birlikdə istifadə edilə bilər. Misal üçün:
.foo ( --boşluq : 20 ; margin-top : calc (var(--gap) * 1px ); /* özünüzə zərər verin */ )JavaScript-də fərdi xüsusiyyətlərlə işləmək
Fərdi xüsusiyyətin dəyərini əldə etmək üçün CSSStyleDeclaration obyektinin getPropertyValue() metodundan istifadə edin.
<p> Bu paraqraf qırmızıdır!p>/* JS */ var üslubları = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue("--primary-color")).trim(); // dəyər = "red" !}
Eyni şəkildə, fərdi xüsusiyyətin dəyərini dinamik şəkildə dəyişdirmək üçün CSSStyleDeclaration obyektinin setProperty() metodundan istifadə edin.
/* CSS */ :root ( --primary-color: red; ) p ( color: var(--primary-color); ) <p>İndi bu paraqraf yaşıldır!p>/* JS */ document.documentElement.style.setProperty("--primary-color", "yaşıl");
Həmçinin, tez bir zamanda fərdi xüsusiyyətin dəyərini təyin edərkən, setProperty() çağırışına var() funksiyasını daxil etməklə başqa xüsusi xüsusiyyətə istinaddan istifadə edə bilərsiniz.
/* CSS */ :root ( --əsas-rəng: qırmızı; --ikinci rəng: mavi; ) <p>Əla! Bu paraqraf mavidir!p>/* JS */ document.documentElement.style.setProperty("--primary-color", "var(--secondary-color)");
Fərdi xassələr digər fərdi xüsusiyyətlərə istinad edə bildiyi üçün siz bu şəkildə yaradıla biləcək bəzi maraqlı dinamik effektləri təsəvvür edə bilərsiniz.
Brauzer dəstəyi
Hazırda fərdi xüsusiyyətlər Chrome 49, Firefox 42, Safari 9.1 və iOS Safari 9.3-də dəstəklənir.
Orijinal məqalə: CSS Dəyişənləri: Niyə diqqət etməlisiniz? Məqalə oxundu:
Uzun müddət maketlə məşğul olanlar bunu dəfələrlə hiss ediblər CSS kodu redaktə etmək çətindir. Məsələn, bütün səhifənin rəng sxemini dəyişmək istəyirdiniz. Bunun üçün nə lazımdır? Bütün blokları bir rəngdən digərinə dəyişdirin. Rahatsız? Razıyam, belə fikirləşdilər SASS Və AZ, lakin bu belə bir həlldir. Məsələn, bütün rəng sxemini dəyişdirmək istəyirsən JavaScript, yoxsa bir neçə blokun enini 2 dəfə artırmaq? Aydındır ki, bu iş monoton kodun yazılmasını tələb edir. Xoşbəxtlikdən, nisbətən yaxınlarda mümkün oldu dəyişənləri birbaşa CSS-də təyin edin, və brauzerlər onları problemsiz emal edir. Bu məqalədə bu barədə danışacağıq.
Aşağıdakı koda baxaq:
Bəzi mətn...
Pseudo elementdə elan edilmişdir kök(baxmayaraq ki, dəyişənləri birbaşa elementlərin özlərində elan edə bilərsiniz). Onların istifadəsi çox sadədir: xüsusi bir əmlak dəyərinin əvəzinə yazın var(dəyişən_adı). Xüsusilə maraqlı olan dəyişənlərin funksiya ilə birlikdə istifadəsidir calc(). Bunun sayəsində saytdakı bir çox elementi bütün nisbətləri qoruyaraq artıra və ya azalda bilərsiniz.
var() funksiyası stil xassə dəyərlərinə fərdi dəyişən dəyərləri daxil etməyə imkan verir. var() selektor adlarında və ya xassələrdə istifadə edilə bilməz.
İstifadəçi dəyişənlərinin özləri və onların dəyərləri xüsusi seçicidə təsvir olunur və iki tire ilə başlamalıdır. İki nöqtə ilə ayrılan dəyişənə CSS tərəfindən icazə verilən istənilən dəyər təyin edilir.
Kənara ( --my-şrift: Helvetica, Arial, sans-serif; )
--my-font dəyişəninə xüsusiyyət dəyəri kimi daxil edilə bilən var(--my-font) istifadə edərək əldə edilir. Bu halda, dəyişənin əhatə dairəsi göstərilən seçici ilə məhdudlaşdırılır (bu halda bir kənara) və var(--my-font) başqa selektorda istifadə nəticə verməyəcək. Qlobal dəyişənlər yaratmaq üçün onlar :root seçicisində elan edilməlidir.
Təyinatlar
| Təsvir | Misal | |
|---|---|---|
| <тип> | Dəyərin növünü göstərir. | <размер> |
| A && B | Dəyərlər göstərilən ardıcıllıqla çıxmalıdır. | <размер> && <цвет> |
| A | B | Təklif olunanlardan (A və ya B) yalnız bir dəyər seçməyiniz lazım olduğunu göstərir. | normal | kiçik qapaqlar |
| A || B | Hər bir dəyər müstəqil və ya başqaları ilə birlikdə istənilən qaydada istifadə edilə bilər. | eni || saymaq |
| Qrup dəyərləri. | [ məhsul || xaç] | |
| * | Sıfır və ya daha çox dəfə təkrarlayın. | [,<время>]* |
| + | Bir və ya bir neçə dəfə təkrarlayın. | <число>+ |
| ? | Göstərilən növ, söz və ya qrup isteğe bağlıdır. | daxil? |
| (A, B) | Ən azı A təkrarlayın, lakin B dəfədən çox deyil. | <радиус>{1,4} |
| # | Vergüllə ayrılmış bir və ya bir neçə dəfə təkrarlayın. | <время># |
Dəyərlər
<переменная>Dəyişən adı qarşısında iki tire (--my-font) ilə göstərilir.<значение>Dəyişən müəyyən edilmədikdə, göstərilən dəyərin yerinə əvəzlənən ehtiyat dəyəri. Vergüllə ayrılmış bir neçə dəyəri təyin edə bilərsiniz.
Misal
Düymələr
Bu nümunə iki dəyişən təqdim edir: --primary-color və --info-color. --white dəyişəni müəyyən edilməyib, ona görə də göstərilən standart dəyər əvəz olunur. p.info seçicisi üçün --primary-color dəyişəninin dəyəri ləğv edilir.
Spesifikasiya
Hər bir spesifikasiya bir neçə təsdiq mərhələsindən keçir.
- Tövsiyə - Spesifikasiya W3C tərəfindən təsdiq edilmişdir və standart olaraq tövsiyə olunur.
- Namizəd Tövsiyəsi ( Mümkün tövsiyə) - standarta cavabdeh olan qrup onun məqsədlərinə cavab verdiyindən razıdır, lakin standartın tətbiqi üçün inkişaf cəmiyyətindən kömək tələb edir.
- Təklif olunan Tövsiyə Təklif olunan Tövsiyə) - bu mərhələdə sənəd yekun təsdiq üçün W3C Məsləhət Şurasına təqdim olunur.
- İşçi Layihə - Müzakirə edilmiş və icmanın nəzərdən keçirilməsi üçün düzəliş edilmiş layihənin daha yetkin versiyası.
- redaktor layihəsi ( Redaksiya layihəsi) - layihə redaktorları tərəfindən dəyişikliklər edildikdən sonra standartın qaralama versiyası.
- qaralama ( Layihə spesifikasiyası) - standartın ilk qaralama variantı.
Son yeniləmə: 11/18/2018
Proqramlaşdırma dilləri kimi, CSS də dəyişənləri təyin etməyə imkan verir. CSS-dəki dəyişənlər fon rəngi, şrift rəngi, şriftin hündürlüyü, elementin eni və hündürlüyü və s. kimi ümumi CSS xüsusiyyətlərinə təyin edilə bilən standart dəyərləri saxlaya bilər. Onlar daha sonra üslub tərifinin müxtəlif hissələrində təkrar istifadə edilə bilər.
Qeyd etmək lazımdır ki, "css dəyişənləri" termini tez-tez istifadə edilsə də, onlar rəsmi olaraq xüsusi xüsusiyyətlər adlanır.
CSS dəyişənlərinin tərifləri -- prefiksi ilə başlamalıdır, məsələn --my-color . Onlar hər hansı bir element üçün müəyyən edilə bilər. Misal üçün:
Üçüncü blok.
Burada CSS kodunda div elementi üçün iki dəyişən müəyyən edilmişdir: --text-color və --text-size
Mətn rəngi: #ff4757; --mətn ölçüsü: 20px;
var() ifadəsi ilə biz bu dəyişənlərə CSS kodunuzun istənilən yerində istinad edə bilərik:
#p1 (rəng: var(--text-color); şrift ölçüsü: var(--text-size); )
Beləliklə, birinci blok şriftin hündürlüyünü --text-size-dən, ikinci blok --text-color-dan şrift rəngini, üçüncü blok isə bu komponentlərin hər ikisini alacaq.
Əgər mətnin rəngini dəyişmək lazım gələrsə, dəyişənin qiymətini dəyişmək kifayət edər.
Oxşar dəyişənlər istənilən element üçün müəyyən edilə bilər. Üstəlik, onlar uşaq elementlər tərəfindən miras alınır. Beləliklə, yuxarıdakı misalda görürük ki, iç-içə paraqraf elementi əsas div-dən üslublar alır.
Lakin paraqraf divdən kənarda olsaydı:
Üçüncü blok.
Sonra dəyişənlərin dəyərləri ona tətbiq edilməyəcək:
Dəyişənlərin bütün elementlər üçün qlobal olaraq istifadə edilməsi zəruridirsə, onlar :root elementi üçün müəyyən edilir.
:root( --text-color: #ff4757; --text-size: 20px; )
Qorunan dəyərlər
Dəyişən təriflərində bəzi xətalar ola bilər, məsələn, dəyişən müəyyən edilməyib (ümumiyyətlə müəyyən edilməyib və ya adında hərf səhvi var). Bu halda, dəyişənin dəyəri səhv olarsa, istifadə ediləcək dəyişəndən istifadə edərkən ehtiyat dəyərləri təyin edə bilərik.
var() funksiyasındakı ikinci parametr ehtiyat dəyərini təyin etməyə imkan verir. Bu, ya dəqiq dəyər, ya da başqa dəyişənin dəyəri ola bilər:
Rəng: var(--text-color, var(--reserved-color));
Yanlış olduqda ikinci dəyişən üçün ehtiyat dəyəri də müəyyən edə bilərsiniz:
Rəng: var(--text-color, var(--reserved-color, red));