CSS-i kohandatud atribuudid: täiustatud kasutusjuhud dünaamiliseks stiliseerimiseks

CSS-i kohandatud atribuudid, tuntud ka kui CSS-i muutujad, on muutnud pöördeliselt seda, kuidas me stiililehti kirjutame ja hooldame. Need pakuvad võimsat viisi korduvkasutatavate väärtuste määratlemiseks, dünaamiliste teemade loomiseks ja keerukate arvutuste tegemiseks otse CSS-is. Kuigi põhitõed on hästi dokumenteeritud, süveneb see juhend täiustatud tehnikatesse, mis võivad teie esiotsa arenduse töövoogu oluliselt parandada. Uurime reaalseid näiteid ja pakume praktilisi teadmisi, mis aitavad teil CSS-i kohandatud atribuutide täit potentsiaali ära kasutada.

CSS-i kohandatud atribuutide mõistmine

Enne täiustatud kasutusjuhtudesse sukeldumist kordame lühidalt üle põhitõed:

• Deklareerimine: Kohandatud atribuudid deklareeritakse süntaksiga --*, näiteks --primary-color: #007bff;.
• Kasutamine: Neile pääseb juurde funktsiooniga var(), näiteks color: var(--primary-color);.
• Ulatus: Kohandatud atribuudid järgivad kaskaadi ja pärilikkuse reegleid, võimaldades kontekstipõhiseid variatsioone.

Täiustatud kasutusjuhud

1. Dünaamiline teemade loomine

Üks kõige veenvamaid kasutusjuhte CSS-i kohandatud atribuutide jaoks on dünaamiliste teemade loomine. Selle asemel, et hallata mitut stiililehte erinevate teemade jaoks (nt hele ja tume), saate määratleda teemaspetsiifilised väärtused kohandatud atribuutidena ja vahetada nende vahel JavaScripti või CSS-i meediapäringute abil.

Näide: heleda ja tumeda teema lüliti

Siin on lihtsustatud näide, kuidas rakendada heleda ja tumeda teema lülitit, kasutades CSS-i kohandatud atribuute ja JavaScripti:

CSS:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
}

[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
  --link-color: #66b3ff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

HTML:

<button id="theme-toggle">Lülita teemat</button>
<div class="content">
  <h1>Minu veebisait</h1>
  <p>Siin on mingi sisu.</p>
  <a href="#">Link</a>
</div>

JavaScript:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  if (body.dataset.theme === 'dark') {
    body.dataset.theme = 'light';
  } else {
    body.dataset.theme = 'dark';
  }
});

Selles näites määratleme vaikeväärtused taustavärvile, tekstivärvile ja lingivärvile pseudoklassis :root. Kui body elemendi atribuut data-theme on seatud väärtusele "dark", rakendatakse vastavad kohandatud atribuutide väärtused, lülitades teema tõhusalt tumedaks.

See lähenemine on väga hooldatav, kuna teema välimuse muutmiseks peate värskendama ainult kohandatud atribuutide väärtusi. See võimaldab ka keerukamaid teemastsenaariume, näiteks mitme värviskeemi või kasutaja määratud teemade toetamist.

Globaalsed kaalutlused teemade loomisel

Globaalsele sihtrühmale teemasid kujundades arvestage järgmisega:

• Värvipsühholoogia: Erinevatel värvidel on erinevates kultuurides erinevad tähendused. Uurige värvide kultuurilist tähtsust enne värvipaleti valimist. Näiteks valge sümboliseerib paljudes lääne kultuurides puhtust, kuid mõnes Aasia kultuuris seostatakse seda leinaga.
• Juurdepääsetavus: Veenduge, et teie teemad pakuksid piisavat kontrasti nägemispuudega kasutajatele. Kasutage kontrastsussuhete kontrollimiseks tööriistu nagu WebAIM Contrast Checker.
• Lokaliseerimine: Kui teie veebisait toetab mitut keelt, kaaluge, kuidas teema suhtleb erinevate tekstisuundadega (nt paremalt vasakule keeled nagu araabia ja heebrea keel).

2. Kohanduv disain kohandatud atribuutidega

CSS-i kohandatud atribuudid võivad lihtsustada kohanduvat disaini, võimaldades teil määratleda erinevaid väärtusi erinevatele ekraanisuurustele. Selle asemel, et korrata meediapäringuid kogu oma stiililehes, saate värskendada mõnda kohandatud atribuuti juurtasandil ja muudatused kanduvad kaskaadina alla kõigile elementidele, mis neid atribuute kasutavad.

Näide: kohanduvad fondisuurused

Siin on, kuidas saate rakendada kohanduvaid fondisuurusi, kasutades CSS-i kohandatud atribuute:

:root {
  --base-font-size: 16px;
}

h1 {
  font-size: calc(var(--base-font-size) * 2);
}

p {
  font-size: var(--base-font-size);
}

@media (max-width: 768px) {
  :root {
    --base-font-size: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --base-font-size: 12px;
  }
}

Selles näites määratleme kohandatud atribuudi --base-font-size ja kasutame seda erinevate elementide fondisuuruste arvutamiseks. Kui ekraani laius on alla 768 piksli, värskendatakse --base-font-size väärtuseks 14 pikslit ja kõigi sellest sõltuvate elementide fondisuurused kohandatakse automaatselt. Samamoodi vähendatakse alla 480 piksli laiuste ekraanide puhul --base-font-size väärtust veelgi 12 pikslini.

See lähenemine muudab ühtlase tüpograafia säilitamise erinevatel ekraanisuurustel lihtsaks. Saate hõlpsasti kohandada baasfondi suurust ja kõik sellest tuletatud fondisuurused värskendatakse automaatselt.

Globaalsed kaalutlused kohanduvas disainis

Globaalsele sihtrühmale kohanduvaid veebisaite kujundades pidage meeles järgmist:

• Erinevad ekraanisuurused: Kasutajad pääsevad veebile juurde laia valiku seadmetega, millel on erinevad ekraanisuurused, eraldusvõimed ja pikslitihedused. Testige oma veebisaiti erinevatel seadmetel ja emulaatorites, et tagada selle hea väljanägemine kõigil neil.
• Võrgutingimused: Mõnes piirkonnas võivad kasutajatel olla aeglasemad või vähem usaldusväärsed internetiühendused. Optimeerige oma veebisaidi jõudlust laadimisaegade ja andmekasutuse minimeerimiseks.
• Sisestusmeetodid: Arvestage erinevate sisestusmeetoditega, nagu puuteekraanid, klaviatuurid ja hiired. Veenduge, et teie veebisaiti on lihtne navigeerida ja sellega suhelda kõigi sisestusmeetodite abil.

3. Keerukad arvutused funktsiooniga calc()

CSS-i kohandatud atribuute saab kombineerida funktsiooniga calc(), et teha keerukaid arvutusi otse CSS-is. See võib olla kasulik dünaamiliste paigutuste loomisel, elementide suuruste kohandamisel vastavalt ekraani mõõtmetele või keerukate animatsioonide genereerimisel.

Näide: dünaamiline ruudustikupaigutus

Siin on, kuidas saate luua dünaamilise ruudustikupaigutuse, kus veergude arvu määrab kohandatud atribuut:

:root {
  --num-columns: 3;
  --grid-gap: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--num-columns), minmax(100px, 1fr));
  grid-gap: var(--grid-gap);
}

.grid-item {
  padding: 20px;
  background-color: #f0f0f0;
}

Selles näites määrab kohandatud atribuut --num-columns ruudustikupaigutuse veergude arvu. Atribuut grid-template-columns kasutab funktsiooni repeat(), et luua määratud arv veerge, millest igaühe minimaalne laius on 100 pikslit ja maksimaalne laius 1fr (fraktsiooniühik). Kohandatud atribuut --grid-gap määratleb ruudustiku elementide vahelise vahe.

Saate hõlpsasti muuta veergude arvu, värskendades kohandatud atribuuti --num-columns, ja ruudustikupaigutus kohandub automaatselt vastavalt. Saate kasutada ka meediapäringuid veergude arvu muutmiseks vastavalt ekraani suurusele, luues kohanduva ruudustikupaigutuse.

Näide: protsendipõhine läbipaistvus

Samuti saate kasutada kohandatud atribuute läbipaistvuse kontrollimiseks protsentuaalse väärtuse alusel:

:root {
    --opacity-percentage: 50;
}

.element {
    opacity: calc(var(--opacity-percentage) / 100);
}

See võimaldab teil kohandada läbipaistvust ühe muutujaga, mis esindab protsenti, parandades loetavust ja hooldatavust.

4. Komponentide stiliseerimise täiustamine

Kohandatud atribuudid on hindamatud korduvkasutatavate ja konfigureeritavate kasutajaliidese komponentide loomisel. Määratledes kohandatud atribuudid komponendi välimuse erinevatele aspektidele, saate selle stiliseerimist hõlpsasti kohandada ilma komponendi põhilist CSS-i muutmata.

Näide: nupu komponent

Siin on näide, kuidas luua konfigureeritav nupu komponent, kasutades CSS-i kohandatud atribuute:

.button {
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-padding: 10px 20px;
  --button-border-radius: 5px;

  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
}

.button:hover {
  --button-bg-color: #0056b3;
}

.button.primary {
  --button-bg-color: #28a745;
}

Selles näites määratleme kohandatud atribuudid nupu taustavärvile, tekstivärvile, polsterdusele ja ääriseraadiusele. Neid atribuute saab üle kirjutada, et kohandada nupu välimust. Näiteks klass .button.primary kirjutab üle atribuudi --button-bg-color, et luua erineva taustavärviga esmane nupp.

See lähenemine võimaldab teil luua korduvkasutatavate kasutajaliidese komponentide teegi, mida saab hõlpsasti kohandada vastavalt teie veebisaidi või rakenduse üldisele disainile.

5. Täiustatud CSS-in-JS integratsioon

Kuigi CSS-i kohandatud atribuudid on CSS-i olemuslik osa, saab neid sujuvalt integreerida ka CSS-in-JS teekidega nagu Styled Components või Emotion. See võimaldab teil kasutada JavaScripti kohandatud atribuutide väärtuste dünaamiliseks genereerimiseks vastavalt rakenduse olekule või kasutaja eelistustele.

Näide: dünaamiline teema Reactis Styled Components abil

import styled from 'styled-components';

const theme = {
  light: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
  },
  dark: {
    backgroundColor: '#333333',
    textColor: '#ffffff',
  },
};

const Button = styled.button`
  background-color: ${props => props.theme.backgroundColor};
  color: ${props => props.theme.textColor};
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

function App() {
  const [currentTheme, setCurrentTheme] = React.useState('light');

  const toggleTheme = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <Button theme={theme[currentTheme]}>Kliki siia</Button>
      <button onClick={toggleTheme}>Lülita teemat</button>
    </div>
  );
}

export default App;

Selles näites määratleme objekti theme, mis sisaldab erinevaid teemakonfiguratsioone. Komponent Button kasutab Styled Components'i, et pääseda juurde teema väärtustele ja rakendada neid nupu stiilidele. Funktsioon toggleTheme värskendab praegust teemat, põhjustades nupu välimuse vastava muutumise.

See lähenemine võimaldab teil luua väga dünaamilisi ja kohandatavaid kasutajaliidese komponente, mis reageerivad rakenduse oleku või kasutaja eelistuste muutustele.

6. Animatsioonide juhtimine CSS-i kohandatud atribuutidega

CSS-i kohandatud atribuute saab kasutada animatsiooniparameetrite, näiteks kestuse, viivituse ja ajastusfunktsioonide juhtimiseks. See võimaldab teil luua paindlikumaid ja dünaamilisemaid animatsioone, mida saab hõlpsasti kohandada ilma animatsiooni põhilist CSS-i muutmata.

Näide: dünaamiline animatsiooni kestus

:root {
  --animation-duration: 1s;
}

.element {
  animation: fadeIn var(--animation-duration) ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Selles näites juhib kohandatud atribuut --animation-duration animatsiooni fadeIn kestust. Saate hõlpsasti muuta animatsiooni kestust, värskendades kohandatud atribuudi väärtust, ja animatsioon kohandub automaatselt vastavalt.

Näide: järk-järgulised animatsioonid

Täiustatud animatsioonide juhtimiseks kaaluge kohandatud atribuutide kasutamist koos atribuudiga `animation-delay`, et luua järk-järgulisi animatsioone, mida sageli nähakse laadimisjärjestustes või sissejuhatavates kogemustes.

.staggered-item:nth-child(1) {
  animation-delay: calc(var(--stagger-delay) * 0);
}

.staggered-item:nth-child(2) {
  animation-delay: calc(var(--stagger-delay) * 1);
}

.staggered-item:nth-child(3) {
  animation-delay: calc(var(--stagger-delay) * 2);
}

Siin määrab `--stagger-delay` iga elemendi animatsiooni alguse vahelise ajanihke, luues kaskaadiefekti.

7. Silumine kohandatud atribuutidega

Kohandatud atribuudid võivad aidata ka silumisel. Kohandatud atribuudi määramine ja selle väärtuse muutmine annab selge visuaalse indikaatori. Näiteks taustavärvi atribuudi ajutine muutmine võib kiiresti esile tõsta konkreetse stiilireegli mõjutatud ala.

Näide: paigutusprobleemide esiletõstmine

.problematic-area {
   --debug-color: red; /* Lisa see ajutiselt */
   background-color: var(--debug-color, transparent); /* Tagavaravariant on läbipaistev, kui --debug-color pole määratletud */
}

Süntaks `var(--debug-color, transparent)` pakub tagavaraväärtust. Kui `--debug-color` on määratletud, kasutatakse seda; vastasel juhul rakendatakse `transparent`. See hoiab ära vead, kui kohandatud atribuut on kogemata eemaldatud.

Parimad praktikad CSS-i kohandatud atribuutide kasutamisel

Selleks, et tagada CSS-i kohandatud atribuutide tõhus kasutamine, kaaluge järgmisi parimaid praktikaid:

• Kasutage kirjeldavaid nimesid: Valige nimed, mis näitavad selgelt kohandatud atribuudi eesmärki.
• Määrake vaikeväärtused: Pakkuge kohandatud atribuutidele vaikeväärtusi, et tagada stiilide korrektne toimimine isegi siis, kui kohandatud atribuuti pole määratletud. Kasutage selleks funktsiooni var() teist argumenti (nt color: var(--text-color, #333);).
• Organiseerige oma kohandatud atribuute: Grupeerige seotud kohandatud atribuudid kokku ja kasutage nende eesmärgi dokumenteerimiseks kommentaare.
• Kasutage semantilist CSS-i: Veenduge, et teie CSS on hästi struktureeritud ja kasutab tähendusrikkaid klassinimesid.
• Testige põhjalikult: Testige oma veebisaiti või rakendust erinevates brauserites ja seadmetes, et tagada kohandatud atribuutide ootuspärane toimimine.

Jõudlusega seotud kaalutlused

Kuigi CSS-i kohandatud atribuudid pakuvad arvukalt eeliseid, on oluline olla teadlik nende võimalikest jõudlusmõjudest. Üldiselt on kohandatud atribuutide kasutamisel minimaalne mõju renderdamise jõudlusele. Siiski võib keerukate arvutuste liigne kasutamine või kohandatud atribuutide väärtuste sagedane värskendamine potentsiaalselt põhjustada jõudluse kitsaskohti.

Jõudluse optimeerimiseks kaaluge järgmist:

• Minimeerige DOM-i manipuleerimisi: Vältige kohandatud atribuutide väärtuste sagedast värskendamist JavaScripti abil, kuna see võib käivitada reflow'sid ja repainte.
• Kasutage riistvaralist kiirendust: Kohandatud atribuutide animeerimisel kasutage jõudluse parandamiseks riistvaralise kiirenduse tehnikaid (nt transform: translateZ(0);).
• Profileerige oma koodi: Kasutage brauseri arendajatööriistu oma koodi profileerimiseks ja kohandatud atribuutidega seotud jõudluse kitsaskohtade tuvastamiseks.

Võrdlus CSS-i eelprotsessoritega

CSS-i kohandatud atribuute võrreldakse sageli muutujatega CSS-i eelprotsessorites nagu Sass või Less. Kuigi mõlemad pakuvad sarnast funktsionaalsust, on mõned olulised erinevused:

• Käitusaeg vs. kompileerimisaeg: Kohandatud atribuute hindab brauser käitusajal, samas kui eelprotsessori muutujaid hinnatakse kompileerimisajal. See tähendab, et kohandatud atribuute saab dünaamiliselt värskendada JavaScripti abil, samas kui eelprotsessori muutujaid ei saa.
• Ulatus: Kohandatud atribuudid järgivad kaskaadi ja pärilikkuse reegleid, samas kui eelprotsessori muutujatel on piiratum ulatus.
• Brauseri tugi: CSS-i kohandatud atribuute toetavad kaasaegsed brauserid loomulikult, samas kui CSS-i eelprotsessorid nõuavad koodi kompileerimiseks standardseks CSS-iks ehitusprotsessi.

Üldiselt on CSS-i kohandatud atribuudid paindlikum ja võimsam lahendus dünaamiliseks stiliseerimiseks, samas kui CSS-i eelprotsessorid sobivad paremini koodi organiseerimiseks ja staatiliseks stiliseerimiseks.

Kokkuvõte

CSS-i kohandatud atribuudid on võimas tööriist dünaamiliste, hooldatavate ja kohanduvate stiililehtede loomiseks. Kasutades täiustatud tehnikaid nagu dünaamiline teemade loomine, kohanduv disain, keerukad arvutused ja komponentide stiliseerimine, saate oma esiotsa arenduse töövoogu oluliselt parandada. Ärge unustage järgida parimaid praktikaid ja arvestada jõudlusmõjudega, et tagada CSS-i kohandatud atribuutide tõhus kasutamine. Kuna brauserite tugi pidevalt paraneb, on CSS-i kohandatud atribuudid valmis saama iga esiotsa arendaja tööriistakomplekti veelgi olulisemaks osaks.

See juhend on andnud põhjaliku ülevaate CSS-i kohandatud atribuutide täiustatud kasutusest. Katsetage neid tehnikaid, uurige edasist dokumentatsiooni ja kohandage neid oma projektidele. Head kodeerimist!