Cum se implementează modurile luminoase sau întunecate în CSS

Specificația CSS este în continuă evoluție. Procesul de implementare a noilor caracteristici în CSS este complicat, dar versiunea simplificată este că grupul de lucru CSS decide asupra noilor elemente care trebuie adăugate la specificație. Apoi este până la browsere pentru a implementa aceste noi elemente, iar browserele aleg în ce ordine să le implementeze, motiv pentru care avem acum o nepotrivire a suportului pentru noi caracteristici. În timp ce acest lucru poate fi enervant uneori, este o modalitate mult mai bună de a face acest lucru decât browserele care implementează specificația completă, așa cum am văzut în primele zile ale Web-ului. Dacă sunteți îngrijorat de site-ul dvs. care lucrează la capacitatea sa deplină, înscrieți sprijinul unui suport web hosting serviciu.

Tot acest sunet ca prea multă muncă? Păstrați lucrurile simple cu a Builder de site-uri web .

Grupul de lucru CSS este alcătuit din membri ai tuturor furnizorilor majori de browser și alte companii de tehnologie, cum ar fi Apple și Adobe. Apple, și-a lansat recent noua sale versiune de MacOS, a vrut o modalitate de a detecta modul său întunecat nou în browser. Pentru a face acest lucru, Apple a împins o recomandare la caietul de sarcini pentru o nouă interogare media de nivel 5.

 @Media (preferă-schema de culori: lumină închisă)
{...} 

Folosind această interogare media, putem detecta dacă utilizatorul utilizează în prezent modul de lumină sau întuneric în sistemul de operare. În prezent, acest lucru este susținut numai de Safari Technology Preview 69 și de mai sus, dar celelalte browsere nu ar trebui să fie mult în urmă.

• Ghidul designerului web pentru metodologiile CSS

Pentru a testa acest lucru, va trebui să fiți modernizat la Mojave 10.14 (MACOS) și ați selectat aspectul întunecat în preferințele sistemului. Există câteva moduri pe care le putem folosi această nouă interogare media pentru a implementa teme diferite. Vom explora câțiva dintre ei acum în acest tutorial.

01. Configurați pagina

Pentru a începe, trebuie să creăm niște elemente HTML la stil, așa că vom începe prin crearea unui stilou nou pe CodePen și adăugând câteva elemente. Vom adăuga un container pentru conținutul nostru, pentru a centra și câteva titluri și text. Vom seta CSS să folosească SASS pentru a folosi cuiburi în CSS.

 și Clasa Div = "Conținut-Container" & GT;
& lt; h1 & gt; îndreptându-se către una 

02. Stil Elemente de bază

În continuare vom adăuga câteva stiluri de bază și vom include câteva fonturi de la Google pentru a face pagina noastră să arate un pic mai plăcut. Vom stilul tuturor elementelor noastre de bază, aplicând noi dimensiuni de fonturi, culori și fonturi.

 corp {
Font-Family: "Merriweather", Serif;
Culoare de fundal: #EDEDED;
Culoare: # 212121;
padding: 1,618rem;
Înălțimea liniei: 1.618;
font-dimensiune: 16px;
} 

03. Container de stil

Apoi, vom stilul nostru pentru a face conținut o lungime de linie confortabilă pentru citire. De asemenea, vom adăuga o culoare de fundal și o umbră de picătură. Pentru a centra caseta de conținut din pagină, vom folosi cuvântul cheie "Auto" pe valorile stângi și drepte ale proprietăților marginilor.

 Content-container {
padding: 1.618rem 3.236rem;
Max-lățime: 48,54rem;
Marja: 3.236rem Auto;
Culoare fundal: #fff;
Box-umbra: 0 0 12px 6px RGBA (0,0,0,05);
Raza de frontieră: .269666667Rem;
} 

04. Adăugați culoarea evidențiază

Majoritatea site-urilor web utilizează culoarea undeva, iar în momentul în care avem doar albii și gri, deci acum să alegem o culoare evidențiază și să creăm un stil pentru aplicarea acestei culori. Vom aplica culoarea folosind o etichetă de span și o vom folosi pentru a evidenția ceva în conținutul nostru.

 & Lt; Span Class = "Text - Alpha" & Gt; Lorem Ipsum & Lt; / Span & Gt;
.Text - alfa {
Culoare: # C3423F;
} 

05. Implementarea interogării media

Acum avem o pagină cu câteva stiluri de bază, să ne uităm la modalitățile pe care le putem implementa interogarea media. Să includem și să începem să depășim unele dintre stilurile noastre. Vom începe cu stilurile corpului.

 @Media (preferă-schema de culori: întuneric)
{
corp {
Culoare de fundal: # 111;
}
} 

06. Suprascrieți stilurile rămase

Acum că putem vedea că interogarea media funcționează și culoarea corpului nostru sa schimbat, trebuie să depășim toate stilurile noastre rămase.

 Container-Content-Container
{
culoare albă;
Culoare de fundal: # 212121;
}
.Text - alfa {
Culoare: # 50A8d8;
} 

07. Menținere

În timp ce ceea ce tocmai am făcut-o funcționează perfect pentru demo-ul nostru și ar putea fi menținut pe site-uri mai mici, această metodă ar fi un coșmar care să gestioneze pe un proiect mai mare, cu o mulțime de elemente diferite care au nevoie de toate persoanele. De asemenea, facem o utilizare grea a cascadei în exemplul nostru de mai sus, în timp ce un sistem mare poate necesita mai multă specificitate pentru a viza toate elementele.

08. Luați o altă abordare

Deci, cum altfel putem aborda problema? Să ne uităm la filtrele CSS. Una dintre valorile pe care le putem folosi pe filtrele CSS este "inversă", astfel încât să putem aplica acest lucru la HTML și să inversez toate culorile, oferindu-ne un "mod întunecat".

 @Media (preferă-schema de culori: întuneric) {
HTML {
Filtru: Invert (100%);
}
} 

09. Adăugați imagini

În timp ce metoda filtrului funcționează cu conținutul pe care îl avem în documentul nostru, acesta nu pare grozav - umbra noastră cutia, de exemplu, a inversat, de asemenea,, care arată destul de ciudat. Am pierdut controlul asupra stilurilor, care devine o problemă și mai mare atunci când aveți medii colorate. Avem, de asemenea, o nouă problemă de a lua în considerare când sunt implicate imagini. Să vedem ce se întâmplă când adăugăm o imagine pe pagina noastră.

10. Utilizați proprietăți personalizate

Metodele pe care le-am explorat până acum ne determină să pierdem controlul asupra stilurilor sau să necesită o mulțime de întreținere pentru a vă asigura că totul este actualizat în modul întunecat. Există un alt mod în care putem aborda acest lucru: putem folosi proprietăți personalizate pentru a defini culorile noastre și apoi le-am suprasolicitat utilizând interogarea media.

11. Creați proprietăți personalizate

Pentru a utiliza proprietăți personalizate, le definim în partea de sus a CSS-ului nostru în interiorul " :rădăcină ' element. Elementul rădăcină are același domeniu ca și HTML să fie disponibil la nivel global. Trebuie să decidem asupra numelor de variabile și să le definim valorile.

: root {
- Culoare: #EDEDED;
- Fundaluri de pagină: #fff;
--Text-Culoare: # 212121;
--Color-alfa: # C3423F;
} 

12. Aplicați proprietățile personalizate

Acum avem niște proprietăți personalizate pe care le putem folosi în CSS. Vom începe cu corpul și vom aplica fundalul și culorile textului. Pentru a utiliza o proprietate personalizată, folosim " VAR (- Custom-Property-Name) "Sintaxă.

 corp {
Culoare fundal: var (- culoarea fundalului);
Culoare: var (- culoarea textului);
} 

13. Aplicați proprietățile rămase

Folosind aceeași metodă, putem actualiza, de asemenea, "culoarea de fundal" a containerului nostru și "culoarea" noastră " text-alfa. "Clasa pentru a utiliza proprietățile noastre personalizate. Toate culorile din pagina noastră sunt acum controlate folosind proprietăți personalizate.

 Content-container {
Culoare de fundal: var (- pagina-fundal);
}
.Text - alfa {
Culoare: var (- culoare-alfa);
} 

14. Re-adăugați interogarea media

Acum putem re-adăuga interogarea media, dar de data aceasta putem suprascrie valorile personalizate ale proprietății care sunt în interiorul acesteia. Vom plasa acest lucru după definiția originală a rădăcinii, iar în interiorul interogării media Putem acum alegem pur și simplu noi valori pentru toate proprietățile personalizate de culoare.

 @Media (preferă-schema de culori: întuneric) {
: root {
- Culoare: # 111;
- Fundal de pagini: # 212121;
--Text-Color: #EDEDED;
--Color-alfa: # 50A8d8;
}
} 

15. Luați controlul deplin

Proprietățile personalizate ne oferă un control complet pentru a alege ce culori și alte proprietăți pe care le schimbăm și le folosim. Să actualizăm umbra casetei pe containerul nostru de pagină pentru ao face mai puțin transparent când utilizați modul întunecat. Pentru a face acest lucru, trebuie să creăm o nouă proprietate personalizată pentru umbra paginii.

: root {
...
- Pagina de pahare: 0 0 12px 6px RGBA
(0,0,0,05);
} 

16. Aplicați umbra

Acum am creat o altă proprietate personalizată pe care trebuie să o aplicați la elementul corect de pe pagină. Apoi, putem suprascrie valoarea din interiorul elementului nostru rădăcină pentru a reduce transparența.

 @Media (preferă-schema de culori: întuneric) {
: root {
...
- Pagina de pahar:
0 0 12px 6px RGBA (0,0,0,0,33)
;
}
}
.Content-container {
...
Box-Shadow: Var (- Pagina-umbra);
} 

17. Adăugați o imagine

Acum, să adăugăm o imagine înapoi în conținutul nostru și apoi putem adăuga niște stiluri de bază pentru a pluti imaginea de lângă conținut.

 img {
Lățime: 100%;
Înălțime: Auto;
plutește la stânga;
Max-lățime: 300px;
Marja-dreapta: 1.618rem;
Margin-fund: 1,618rem;
} 

După cum putem vedea, deoarece nu folosim filtre, imaginea nu este modificată între cele două teme.

18. Adăugați mai multe componente

Acum avem proprietățile noastre personalizate, putem continua să adăugăm elemente la pagină și să le styling cu variabilele noastre. Să creăm o clasă de butoane și să adăugăm un buton pe pagina noastră.

 .button {
Afișaj: Inline-Flex;
Font-Family: moștenit;
fundal-culoare: var (- culoare-alfa);
Culoare: var (- culoarea textului);
padding: 1.618rem 3.236rem;
Frontieră: 0 Nici unul;
Raza de frontieră: 0,25rem;
Text-decorare: Nici unul;
}

19. Creați butonul Stiluri de hover

Folosind aceleași variabile, putem crea și un stil de hover care poate fi utilizat pentru ambele teme. Pentru a realiza acest lucru, vom inversa culorile atunci când utilizatorul se îndreaptă peste buton și vom trece aceste proprietăți pentru a face experiența mai puțin jarring.

 .button {
...
Tranziție: fundal-color 150ms,
Culoare 150ms;
& Hover {
Culoare de fundal: var (- culoarea textului);
Culoare: var (- culoare-alfa);
}
} 

20. Efectuați proprietățile personalizate ale butonului

Proprietățile personalizate au același domeniu ca elemente CSS obișnuite; Aceasta înseamnă că le putem suprascrie folosind un selector mai specific. Putem profita de aceasta și creăm câteva variabile care sunt scoase la butonul nostru.

 .button {
- button-fundal: var (- culoare-alfa);
- Button-text: var (- culoarea fundalului);
Culoare de fundal: var (- buton-fundal);
Culoare: Var (- Text buton);
...
} 

21. Utilizați domeniul de aplicare

Putem utiliza acest domeniu de aplicare pentru a crea diferite stiluri și interacțiuni din Hover pentru butonul nostru în teme întunecate și ușoare. Putem schimba valoarea variabilelor noastre pe baza interogării media sau a stării elementului, în loc să repetăm ​​proprietatea cu o nouă valoare așa cum am fi în mod normal.

 .button {
...
& Hover {
- Buttle-fundal: # AE3937;
@Media (preferă-schema de culori: întuneric) {
- Button-fundal: # 2E98d1;
- Button-Text: Var (- fundal-
culoare);
}
}
}

Lucrând pe o clădire cu o echipă? Păstrați procesul coeziv cu decent Stocare in cloud .

Acest articol a fost publicat inițial în numărul 283 din revista Creative Web Design Web designer . Cumpăra problema 283. sau Aboneaza-te la designerul web aici .

Articole similare:

• Începeți cu arta CSS
• 12 mari resurse de animație CSS
• Ce cadru CSS ar trebui să utilizați?