Hoe licht- of donkere modi te implementeren in CSS

De CSS-specificatie is steeds evoluerend. Het proces voor het implementeren van nieuwe functies in CSS is ingewikkeld, maar de vereenvoudigde versie is dat de CSS-werkgroep beslist over de nieuwe elementen die aan de specificatie moeten worden toegevoegd. Het is dan aan de browsers om deze nieuwe elementen uit te voeren en de browsers kiezen in welke volgorde ze implementeren, daarom hebben we nu een mismatch van ondersteuning voor nieuwe functies. Hoewel dit soms irritant is, is het een veel betere manier om het te doen dan de browsers die de volledige specificatie implementeren, zoals we in de vroege dagen van het web zagen. Als u zich zorgen maakt over uw site aan het werk van zijn volledige vermogen, pletter de steun van een ondersteunend web hosting onderhoud.

Al dit geluid als te veel werk? Houd dingen eenvoudig met een website bouwer ​

De CSS-werkgroep bestaat uit leden van alle grote browserverkopers en andere technologiebedrijven zoals Apple en Adobe. Apple, die onlangs zijn nieuwe versie van MacOS heeft gelanceerd, wilde een manier om zijn snazzy nieuwe donkere modus in de browser te detecteren. Om dit te doen, duwde Apple een aanbeveling naar de specificatie voor een nieuw niveau 5-mediacy-query.

 @media (preferen-kleuren-schema: licht | donker)
{...} 

Met behulp van deze mediaquery kunnen we detecteren of de gebruiker momenteel een lichte of donkere modus in het besturingssysteem gebruikt. Op dit moment wordt dit alleen ondersteund door Safari Technology Preview 69 en hoger, maar de andere browsers mogen niet ver achterblijven.

• De gids van een Web Designer voor CSS-methodologieën

Om dit te testen moet u naar Mojave 10.14 (MacOS) worden geüpgraded en heeft u een donkere uitstraling geselecteerd in systeemvoorkeuren. Er zijn een paar manieren waarop we deze nieuwe mediaquery kunnen gebruiken om verschillende thema's te implementeren. We zullen nu een paar van hen verkennen in deze tutorial.

01. Stel de pagina in

Om te beginnen, moeten we enkele HTML-elementen maken om te stylen, dus we zullen beginnen met het maken van een nieuwe pen op COCEIPEN en het toevoegen van enkele elementen. We voegen een container toe voor onze inhoud, om het te centreren, en enkele kopjes en tekst. We stellen de CSS in om SASS te gebruiken om nesting in CSS te gebruiken.

 & lt; div class = "content-container" & GT;
& LT; H1 & GT; KOPERING ONE & LT; / H1 & GT;
& LT; H2 & GT; KOPEREN TWEE & LT; / H2 & GT;
& LT; HR & GT;
& LT; P & GT; ... & LT; / P & GT;
& LT; P & GT; ... & LT; / P & GT;
& LT; / DIV & GT; 

02. Stijl Basic Elements

Vervolgens voegen we enkele basisstijlen toe en bevatten sommige lettertypen van Google om onze pagina een beetje mooier te laten zien. We stellen al onze basiselementen in, die nieuwe lettergroottes, kleuren en lettertypen toepassen.

 lichaam {
Font-familie: 'Merriweather', Serif;
Achtergrondkleur: #ededed;
Kleur: # 212121;
Vulling: 1.618rem;
Lijnhoogte: 1.618;
FONT-GROOTTE: 16PX;
} 

03. Stijlcontainer

Vervolgens stijpen we onze container om de inhoud een comfortabele lijnlengte te maken voor het lezen. We voegen ook een achtergrondkleur en dalen schaduw toe. Om het contentvak op de pagina te centreren, gebruiken we het trefwoord 'Auto' op de linker- en rechterwaarden van de marge-eigenschappen.

 .Container {
Vulling: 1.618rem 3.236REM;
MAX-BREEDTE: 48.54REM;
Marge: 3.236rem Auto;
Achtergrondkleur: #fff;
Box-Shadow: 0 0 12PX 6PX RGBA (0,0,0,0.05);
Border-Radius: .269666667rem;
} 

04. Markeerkleur toevoegen

De meeste websites maken ergens gebruik van kleur en op dit moment hebben we alleen blanken en grijs, dus laten we nu een hoogtepunt kiezen en een stijl creëren voor het toepassen van deze kleur. We zullen de kleur toepassen met behulp van een spaan-tag en zal het gebruiken om iets in onze inhoud te benadrukken.

 & lt; span class = "Tekst - Alpha" & GT; LOREM IPSUM & LT; / SPAN & GT;
.text - Alpha {
Kleur: # C3423F;
} 

05. Implementeer de mediaquery

Nu hebben we een pagina met een aantal basisstijlen, laten we kijken naar manieren waarop we de mediaquery kunnen implementeren. Laten we het opnemen en beginnen met het overschrijven van enkele van onze stijlen. We beginnen met de lichaamsstijlen.

 @media (Prefers-Color-Scheme: Dark)
​
lichaam {
Achtergrondkleur: # 111;
​
} 

06. Overschrijven de resterende stijlen

Nu we kunnen zien dat de mediaquery werkt en de kleur van het lichaam is veranderd, moeten we al onze resterende stijlen overschrijven.

 .Container-container
​
kleur wit;
Achtergrondkleur: # 212121;
​
.text - Alpha {
Kleur: # 50A8D8;
} 

07. Onderhoudbaarheid

Hoewel het net klaar is, werkt het net goed voor onze demo en zou deze methode kunnen worden gehandhaafd op kleinere websites, deze methode zou een nachtmerrie zijn om op een groter project te beheren, met veel verschillende elementen die allemaal moeten worden gedragen. We maken ook zwaar gebruik van de cascade in ons bovenstaande voorbeeld, terwijl een groot systeem meer specificiteit kan vereisen om alle elementen te richten.

08. Neem een ​​andere aanpak

Dus hoe kunnen we het probleem anders aanpakken? Laten we kijken naar CSS-filters. Een van de waarden die we kunnen gebruiken op CSS-filters is 'omkeren', dus we konden dit gewoon op de HTML toepassen en alle kleuren omkeren, ons een 'Dark-modus' geven.

 @media (preferen-kleuren-schema: donker) {
html {
Filter: omkeren (100%);
​
} 

09. Afbeeldingen toevoegen

Hoewel de filtermethode werkt met de inhoud die we in ons document hebben, ziet het er nog steeds niet geweldig uit - onze box schaduw, bijvoorbeeld, heeft ook omgekeerd, wat er vrij vreemd uitziet. We hebben de controle over de stijlen verloren, wat een nog groter probleem wordt wanneer u gekleurde achtergronden hebt. We hebben ook een geheel nieuw probleem om te overwegen wanneer afbeeldingen erbij betrokken zijn. Laten we eens kijken wat er gebeurt wanneer we een afbeelding toevoegen aan onze pagina.

10. Gebruik aangepaste eigenschappen

De methoden die we hebben onderzocht, ongeacht of ons de controle over de stijlen verliezen of veel onderhoud nodig hebben om ervoor te zorgen dat alles in de donkere modus wordt bijgewerkt. Er is een andere manier waarop we dit kunnen benaderen: we kunnen aangepaste eigenschappen gebruiken om onze kleuren te definiëren en ze vervolgens te negeren met behulp van de mediaquery.

11. Maak aangepaste eigenschappen

Om aangepaste eigenschappen te gebruiken, definiëren we ze bovenaan onze CSS in de ' :wortel Element. Het root-element heeft dezelfde reikwijdte als HTML dus wereldwijd beschikbaar is. We moeten beslissen over de variabele namen en hun waarden definiëren.

: Root {
- background-color: #ededed;
- Page-achtergrond: #fff;
- Text-color: # 212121;
- Color-Alpha: # C3423F;
} 

12. Pas onze aangepaste eigenschappen toe

Nu hebben we enkele aangepaste eigenschappen gedefinieerd, we kunnen ze gebruiken in onze CSS. We zullen beginnen met het lichaam en de achtergrond en tekstkleuren toepassen. Om een ​​aangepast eigendom te gebruiken, gebruiken we de ' Var (- Custom-eigendom-naam) 'Syntaxis.

 lichaam {
Achtergrondkleur: Var (- achtergrondkleur);
Kleur: Var (- Text-Color);
} 

13. Breng resterende eigenschappen aan

Met dezelfde methode kunnen we ook de 'achtergrondkleur' ​​van onze container en de 'kleur' ​​van onze 'updaten tekst-alfa 'Klasse om onze aangepaste eigenschappen te gebruiken. Alle kleuren op onze pagina worden nu bestuurd met behulp van aangepaste eigenschappen.

 .Container {
Achtergrondkleur: Var (- pagina-achtergrond);
​
.text - Alpha {
Kleur: Var (- Color-Alpha);
} 

14. Voeg de mediaquery opnieuw toe

Nu kunnen we de media-query opnieuw toevoegen, maar deze keer kunnen we de aangepaste eigenschapswaarden overschrijven die erin zijn. We zullen dit direct na de oorspronkelijke root-definitie plaatsen en in de mediacy-query kunnen we nu eenvoudigweg nieuwe waarden kiezen voor al onze color aangepaste eigenschappen.

 @media (preferen-kleuren-schema: donker) {
: Root {
- background-color: # 111;
- Page-achtergrond: # 212121;
- Text-Color: #ededed;
- Color-Alpha: # 50A8D8;
​
} 

15. Neem volledige controle

Aangepaste eigenschappen geven ons volledige controle om te kiezen welke kleuren en andere eigenschappen die we veranderen en gebruiken. Laten we de doosschaduw op onze paginacontainer bijwerken om het minder transparant te maken bij het gebruik van Dark-modus. Om dit te doen, moeten we een nieuw aangepast eigendom maken voor de schaduwpagina.

: Root {
​
- Page-Shadow: 0 0 12PX 6PX RGBA
(0,0,0,0.05);
} 

16. Breng de schaduw aan

Nu hebben we een ander aangepast eigendom gemaakt dat we nodig hebben om het op het juiste element op de pagina toe te passen. We kunnen vervolgens de waarde in ons root-element overschrijven om de transparantie te verminderen.

 @media (preferen-kleuren-schema: donker) {
: Root {
​
- Page-Shadow:
0 0 12PX 6PX RGBA (0,0,0,0.33)
​
​
​
.content-container {
​
Box-Shadow: Var (- Page-Shadow);
} 

17. Voeg een afbeelding toe

Laten we nu een afbeelding weer in onze inhoud toevoegen, en dan kunnen we enkele basisstijlen toevoegen om het beeld naast de inhoud te drijven.

 IMG {
Breedte: 100%;
Hoogte: Auto;
zweven: links;
Max-breedte: 300px;
Margin-rechts: 1.618rem;
margin-bodem: 1.618rem;
} 

Zoals we kunnen zien, omdat we geen filters gebruiken, wordt het beeld niet gewijzigd tussen de twee thema's.

18. Voeg meer componenten toe

Nu hebben we onze aangepaste eigenschappen die we kunnen blijven toevoegen van elementen aan de pagina en ze te stylen met onze variabelen. Laten we een knopklasse maken en een knop toevoegen aan onze pagina.

. Button {
Display: Inline-Flex;
Font-familie: erven;
Achtergrondkleur: Var (- Color-Alpha);
Kleur: Var (- Text-Color);
Vulling: 1.618rem 3.236REM;
Grens: 0 Geen;
Border-Radius: 0.25rem;
tekst-decoratie: geen;
​

19. Maak knophovenstijlen

Met dezelfde variabelen kunnen we ook een hover-stijl maken die voor beide thema's kan worden gebruikt. Om dit te bereiken, zullen we de kleuren inverteren wanneer de gebruiker over de knop zweeft en die eigenschappen overgaan om de ervaring minder schokkend te maken.

. Button {
​
Overgang: achtergrond-kleur 150ms,
kleur 150ms;
& Amp;: Hover {
Achtergrondkleur: Var (- Tekstkleur);
Kleur: Var (- Color-Alpha);
​
} 

20. Maak knop aangepaste eigenschappen

Aangepaste eigenschappen hebben dezelfde reikwijdte als reguliere CSS-elementen; Dit betekent dat we ze kunnen overschrijven met behulp van een meer specifieke selector. We kunnen hiervan profiteren en een aantal variabelen maken die naar onze knop worden geschoven.

. Button {
- Button-achtergrond: Var (- Color-Alpha);
- Button-tekst: var (- achtergrondkleur);
Achtergrondkleur: Var (- knop-achtergrond);
Kleur: Var (- knop-tekst);
​
} 

21. Gebruik scope

We kunnen deze reikwijdte gebruiken om verschillende stijlen en hover-interacties voor onze knop in donkere en lichte thema's te maken. We kunnen de waarde van onze variabelen wijzigen op basis van de mediaquery of de status van het element, in plaats van het pand met een nieuwe waarde te herhalen zoals we normaal zouden doen.

. Button {
​
& Amp;: Hover {
- Button-achtergrond: # AE3937;
@media (preferen-kleuren-schema: donker) {
- Button-achtergrond: # 2E98D1;
- Button-tekst: var (- achtergrond-
kleur);
​
​
​

Werken aan een build met een team? Houd uw proces samenhangend met fatsoenlijk cloud opslag ​

Dit artikel is oorspronkelijk gepubliceerd in kwestie 283 van Creative Web Design Magazine Webdesigner ​ Koop Issue 283 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• Ga aan de slag met CSS Art
• 12 Geweldige CSS-animatiebronnen
• Welk CSS-raamwerk moet u gebruiken?