CSS değişkenleriyle siteyi nasıl ayarlanır

CSS özel özellikleri, genellikle CSS değişkenleri olarak bilinen, şimdi tüm büyük modern tarayıcılar tarafından desteklenmektedir. Bu, Internet Explorer gibi eski tarayıcıları desteklemek zorunda kalmayan projeler için, CSS değişkenleri olarak kabul edilebilir - tüm niyet ve amaçlar için - kullanımı güvenlidir.

Birçok geliştirici zaten SASS gibi ön işleme sahip değişkenleri kullanıyor veya Az kod tekrarını azaltma aracı olarak. Yerel CSS değişkenleri büyük ölçüde aynı şekilde çalışır, ancak herhangi bir ek yapı adımı gerektirmez, normal bir CSS özelliği gibi cascade ve en önemlisi çalışma zamanında mevcuttur. (Sitenizi sorunsuz bir şekilde çalıştırmak için, doğru seçtiğinizden emin olun. ağ sağlayıcısı hizmet.)

• Sass nedir?

Bu avantajlar, yerel CSS değişkenlerini ön işleme sahiplerinin üzerinde bir kenarı verir ve geliştiricilerin çok daha az kodla ilginç bir şey yapması için kapıyı açar. Siteniz için sıfır kod seçenekleri ile ilgileniyor musunuz? İşte en üste rehberimiz Web Sitesi Oluşturucu .

Bu eğitimde, CSS değişkenlerini NOTEAPP adlı bir sahte web uygulamasına uygulamak için Nasıl CSS değişkenlerini kullanabileceğimizi keşfediyoruz. Bu yazıyı içerecek Css ve Javascript Kullanıcının renk şemasını değiştirmesine ve gösterilen sütun miktarını değiştirmesine izin vermek için. Gelecekteki oturumlar için herhangi bir değişiklik yapıldığından emin olmak için Web Depolama API'sini kaldıracağız.

Eğitim dosyalarını alın

İlk önce ilk şeyler, proje dosyalarını indirin Web Tasarımcısı'nın Filesilo (Sayı 264). Not: İlk kez kullanıcıların FileSilo'yu kullanmak için kaydolması gerekecektir.

01. Çalışma alanını ayarlayın

İçinde / Web Sitesi Şablon Dizin, CSS değişkenlerini ve Web Depolama API'sini kullanarak web sitesini uygulamayacağımız Static NoteApp web sayfasını bulacaksınız. Tercih ettiğiniz metin düzenleyicinizdeki dizini açın.

02. CSS değişkenlerimizi ayarlayın

İçinde ana.css , Projenin CSS'lerinin çoğunu bulacaksınız. Üstte, hedefleyen bir blok oluşturun. kök psödo sınıfı. İçinde, aşağıdaki pasajdaki gibi değişkenleri tanımlar. Bu kök bloğu, herhangi bir normal CSS özelliği gibi stil sayfamız üzerinden basamaklayacak global değişkenler içerir.

: root {
  --primary: # 2f353e;
  --Seconary: # 2B9BCA;
  --ERiary: # F3583F;
  - proquaternary: # e0e1e2;
  - Sorun: #ffffff;
} 

03. Renkleri değişkenlerle değiştirin

Manuel olarak veya Bul / Değiştir'i kullanarak stil sayfasından geçin ve statik renk altıgen kodlarını, kök bloğundan karşılık gelen değişkenleriyle değiştirin. Bunu yapmak için kullanın zırva İşlev ve değişkenin adını geç. Bu, tarayıcıya bu değişkenin değerini referans vermesini söyler. Örneğin:

 .c-header {
  arka plan rengi: var (- birincil);
  Renk: var (- quiner);
} 

04. Simgeler için satır içi SVG'yi bulun

Açık index.html ve fark ettiğiniz ilk şeylerden biri büyük bir SVG öğesidir. Bu, her biri bir sembol öğesine sarılmış ve benzersiz bir kimlik verilen tüm sayfaların simgelerinin yollarını içerir. Bu semboller daha sonra gerektiğinde gerektiğinde referans verilir. kullanmak SVG kodunun çoğaltılması olmadan simgelerin yeniden kullanılmasına izin veren eleman.

05. SVG'ye CSS değişkenleri ekleyin

Bir .svg dosyası yerine satır içi SVG kullanmanın bir faydası, CSS'nin iç yapısına erişebilmesidir. Bu, CSS değişkenlerimiz (tarayıcı desteğini kontrol edin) İşte ). İçinde index.html , SVG'nin stil bloğunu aşağıdaki snippet ile değiştirin. Artık SVG'nin renklerinin her biri, CSS değişkenlerimizin değerleriyle bağlantılıdır.

 & lt; stil & gt;
  .primary {
  Doldur: var (-primary, # 2F353E);
  }
  .ikincil {
  Doldur: var (-Seconary, # 2B9BCA);
  }
& lt; / stil & gt; 

06. Bir sütun değişkeni oluşturun

Ayrıca, rengin dışındaki özellikler için CSS değişkenlerini de kullanabiliriz. Kök bloğunda yeni bir değişken oluşturun, arayın sütunlar ve 3 değeri ver. Bunun varsayılan değeri ile eşleşmelidir. Sütunlar Sayfadaki UI bileşeni. İşlevsel olduğunda, bu bileşen sütun sayısını değiştirir.

: root {
  --primary: # 2f353e;
  --Seconary: # 2B9BCA;
  --ERiary: # F3583F;
  - proquaternary: # e0e1e2;
  - Sorun: #ffffff;
  --columns: 3;
} 

07. Bir sütun değiştirme

Yeni sütunlarımızı ve calc () İşlev, şimdi doğru sütun sayısını oluşturmak için her notun ne kadar genişliğinde olması gerektiğini hesaplayacağız. Örneğin, sütunlar 4 olarak ayarlanmışsa, her notun% 25 genişliğe sahip olması gerekir.

 .c-note {
  Genişlik: Calc (% 100 / var (sütunlar));
} 

08. JS Sınıfları ve Veri Öznitelikleri Ekleyin

JS davranışını bir DOM öğesine uygularken, JS öneki olan bir sınıf üzerinden içine girin. Bu, bir elemanın CSS'lerden fonksiyonel yönlerini ayırır. Ekleyelim bir JS-Update-Değişken Tüm renk ve radyo girişlerinin yanı sıra veri niteliği güncellemek için ilgili değişkenin referanslanması.

 & lt; giriş tipi = "renk" değeri = "# 2F353E"
Sınıf = "JS-Update-Değişken U-Gizli-Görsel olarak"
veri değişkeni = "birincil" & gt; 

09. CSS değişkenlerini güncellemek için JS ekleyin

Açık main.js ve aşağıdaki snippet'i ekleyin. Bu bizim için döngülerimiz JS-Update-Değişken Girişler ve mantık ekler, böylece değişiklikte, veri değişkeni özniteliğinde başvurulan değişken, girişler değeri ile güncellenir. Renk örnekleri ve sütun geçişi şimdi çalışıyor olmalı!

 var vartrig = belge
.Queryselectorall (". JS-Update-değişken");
için (var i = 0; ben & lt; vartrig.length; i ++) {
VARTRIG [i]
.addeventListener ("Değişim", Function () {
belge.documentelement.style
.Setproperty ("-" + this.dataset.variable,
Bu değer);
});
} 

10. Bir JS sınıfını Kaydet düğmesine takın

Sadece, kaydet düğmesini tıklarken, mevcut olanı otomatik olarak geçersiz kılar. Başlamak için ekleyin .js-Save-renkler için Kayıt etmek JS kancası olarak işlev görmek için düğme.

 & lt; düğme sınıfı = "C-button JS-Save-rengits"
DATA-MODAL = "JS-MODAL" veri modal
-Content = "JS-Colors-Modal-Content" & GT;
Kaydet & lt; / button & gt; 

11. Renkler dizisi oluşturun

Geri main.js , denilen yeni bir değişkeni ilan et renkler Ve Kaydet düğmesi tıklandıktan sonra kaydedilmek istediğimiz tüm renk değişkenlerini içeren yeni bir dizi atayın.

 var renkleri = [
  "birincil",
  "ikincil",
  "Tersiyer",
  "Kuaterner",
  "beşli"
]; 

12. Tasarruf Düğmesi Olay Dinleyici oluşturun

Renkler dizisinin altında, için bir tıklama olay dinleyicisi oluşturun. JS-Save-Colors Daha önce Kaydet düğmesine eklediğimiz sınıf. İçinde, denilen yeni bir değişken oluşturun htmlstyles ve kök HTML öğesinin bilgisayarlı özelliklerini atayın. Bunu CSS değişkenlerimize erişmek için kullanacağız.

 belge.queryselector (". JS-Save-Colors")
.addeventListener ("Tıkla", işlevi () {
var htmlstyles = pencere
.getComputedStyle (belge)
.Queryselector ("html")),
}), 

13. Kayıt CSS Renk Değişkenleri

Daha sonra, olay dinleyicisi içinde, denilen yeni bir değişken oluşturun. colourstosave ve boş bir nesneyi atayın. Sonra, bir İÇİN kullanarak döngü renkler Adımdan itibaren dizi. İçinde, içinde belirtilen değişkenlerin tam bir anahtar / değer kaydını ekleyeceğiz. renkler dizi colourstosave nesne.

 'Colourstosave' nesnesine dizinin.
colourstosave = yeni nesne;
için (var i = 0; i & lt; colours.length; i ++) {
colourstosave [renkler [i]] = htmlstyles
.getpropertyValue ("-" + Renkler [i]);
} 

14. Colourstosave Gönder YerelStorage

Şimdi kaydedilen tüm renk değişkenlerine sahibiz. colourstosave , lokalstorage adında web depolama API'nin bir bileşenine göndereceğiz. Bu, aslında oturumlarda devam eden bir nesnedir. Bunun içindeki diğer nesneleri saklayabiliriz. setitem () yöntem. Hadi gönderelim colourstosave nesne.

 localstorage.setitem ("renkler",
Json.Stringify (colourstosave)); 

15. Sütunlara JS sınıfı ekleyin

Renklere ek olarak, seçilen sütun numaralarımızın oturumlarda da devam ettiğinden emin olmak istiyoruz. Bunun için ilk adım eklemek olacaktır. JS-Update-Sütunları Sütunlar bileşeni içindeki tüm radyo girişlerine.

 & lt; giriş tipi = "radyo" adı = "sütunlar" sınıfı
= "JS-Update-Değişken JS-Update sütunları
u-gizli-görsel olarak "değeri =" 1 "
veri değişkeni = "sütunlar" & gt; 

16. Yerel Masal'a sütunlar gönderin

Her biri için JS-Update-Sütunları , bir sonraki olay için değişiklik izlemek için olay dinleyicilerini atayacağız. Tespitte, daha sonra mevcut değerini göndereceğiz. sütunlar değişken yerel depolama , yine kullanarak setitem () yöntem. Renklerden farklı olarak, bu değeri bir nesne olmadığı için telaffuz etmemize gerek yok.

 var colinputs = belge
.queryselectorall (". JS-Update-Sütunları");
için (var i = 0; i & lt; colinputs; i ++) {
colinputs [i] .addeventlistener ("Değişim",
işlevi () {var htmlstyles = pencere
.getComputedStyle (belge)
.Queryselector ("html"));
localstorage.setitem ("sütunlar",
htmlstyles.getpropertyValue ("- sütunlar"));
});} 

17. Yeni oturumları kullanın

Kullanıcı daha önce bir renk ve sütun tercihini seçtikten sonra dönerse, bu kaydedilen verilerin CSS değişkenlerine geri döndürüldüğü için mantık oluşturmamız gerekiyor. İlk adım bir tanımlamaktır. Domcontentloaded olay dinleyici ve sonra bir Eğer Kullanarak yerel tasarımda kaydedilmiş verileri kontrol etme ifadesi getitem () yöntem.

 Belge.addeventListener
("Domcontentloaded", işlevi () {
Eğer (localstorage.getitem ("renkler")) {
}
if (localstorage.getitem ("sütunlar")) {
}
}); 

18. Renk değişkenlerinin değiştirilmesi

Renklerde Eğer ifade, denilen yeni bir değişken oluşturun SaveDcolours ve ayrıştırılmış bir renk nesnesinin değerini atayın yerel depolama . Kullanmak İçin çekmek SaveDcolours , her renk anahtarı / değer çiftini alın ve bir CSS değişkeni olarak kök HTML öğesine ekleyin.

 var savedcolours = json.parse
(localstorage.getitem ("renkler"));
için (Color of SavedColours) {
document.documentelement.style.setproperty
("-" + renk, savedcolaours [renk]); } 

19. Sütun değişkenleri verilerini toplayın

Sütunlar değişkenini değiştirmeden önce, kaydedilen verilere ilk önce referansları almalıyız. yerel depolama ve ayrıca içindeki radyo girişleri Sütunlar bileşen. İkincisi, doğru sayının önceden seçildiğinden emin olmak için durumunu güncelleyebiliriz.

 Var sütunları = localstorage
.getitem ("sütunlar"),
columntriggers = belge.
QuerySelectorall (". JS-Update-Sütunları"); 

20. Değişken ve durumu değiştirin

Son olarak, Sütun CSS değişkenini kaydedildiği ile güncelleyeceğiz. yerel depolama meslektaşı ve ilgili radyo girişinin kontrol edilen özniteliğini Sütunlar True bileşeni. Sütunlar - 1 sütunların gerçeğini telafi etmektir Nodelist sıfır tabanlıdır.

 belge.documentelement.style
.SetProperty ("sütunlar", sütunlar);
columntriggers [sütunlar - 1] .Checked = true; 

21. Bitmiş ürünü test edin

Bu kadar! Mock NotApp sayfasındaki her şey şimdi çalışmalı. Renk örneklerini tıklatarak kendi renk şemunuzu oluşturabilir ve ardından yerel depolama Kaydet düğmesi ile. Gösterilen sütun miktarını değiştirmek istiyorsanız, sütun bileşeninde uygun numarayı tıklatın.

Ve hatırla, her zaman yükseltmeye değer Bulut depolama Yeni bir projenin önünde, böylece attığınız dosyaları işleyebilir.

Bu makale başlangıçta Web Designer Magazine Sayı 264'te ortaya çıktı. Abone olun .

Daha fazla oku:

• 15 Gerçekten Yararlı Duyarlı Web Tasarım Öğreticileri
• SASS ile Nasıl Başarılır
• Web'de rengi daha iyi yönetmek için 7 ipucu