JavaScript în CSS
CSS permite stocarea codului JavaScript în variabile. Deși păstrarea codului JS în variabile poate părea lipsită de sens, acest cod poate fi executat de browser ca orice cod standard JavaScript. Să luăm în considerare un exemplu simplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
:root {
--script: console.log("Salut de la CSS");
}
</style>
</head>
<body>
<script>
// obținem stilurile documentului
const style = getComputedStyle(document.documentElement);
// obținem valoarea proprietății --script
const script = style.getPropertyValue("--script");
// Executăm codul din proprietatea --script
new Function(script)();
// variantă alternativă de execuție
// eval(script);
</script>
</body>
</html>Aici proprietatea sau variabila CSS --script conține cod JS care afișează un mesaj în consola browserului.
Pentru a executa acest cod, mai întâi obținem stilurile documentului:
const style = getComputedStyle(document.documentElement);Apoi, printre aceste stiluri, obținem definiția proprietății --script:
const script = style.getPropertyValue("--script");Apoi executăm codul:
new Function(script)();Ca alternativă pentru executarea codului, putem apela funcția eval():
eval(script);În final, mesajul corespunzător va fi afișat în consola browserului.
În calitate de cod stocat, pot fi aplicate expresii JavaScript mai complexe. De exemplu, folosim construcția if:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
:root {
--script: if (x > 5) document.body.style.background = "blue";
}
</style>
</head>
<body>
<script>
let x = 10;
const style = getComputedStyle(document.documentElement);
const script = style.getPropertyValue("--script");
eval(script);
</script>
</body>
</html>Aici, dacă valoarea variabilei x este mai mare de 5, atunci colorăm spațiul elementului body în culoarea albastră.
În ce situații astfel de capacități pot fi de folos practic? La prima vedere, nu sunt prea multe situații. Și la o simplă gândire, singurul lucru care vine în minte este un anumit tip de jurnalizare, care, într-un fel sau altul, este legat de setările din CSS. De exemplu, am putea dori să jurnalizăm lățimea minimă a ferestrei browserului folosit de utilizator. În acest caz, am putea scrie ceva de genul următor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
:root{
--log: localStorage["minwidth"] = 0;
}
@media (min-width:500px) {
:root{
--log: localStorage["minwidth"] = 500;
}
}
@media (min-width:800px) {
:root{
--log: localStorage["minwidth"] = 800;
}
}
@media (min-width:1200px) {
:root{
--log: localStorage["minwidth"] = 1200;
}
}
</style>
</head>
<body>
<script>
window.onload = window.onresize = ()=>{
const log = getComputedStyle(document.documentElement).getPropertyValue("--log");
eval(log);
};
</script>
</body>
</html>Aici în localStorage scriem un element cu cheia "minwidth", valoarea căruia depinde de valorile media-query. În codul JavaScript, definim gestionarul de evenimente window.onresize și window.onload, astfel încât la încărcarea paginii, precum și la schimbarea lățimii ferestrei browserului, valoarea din localStorage să fie rescrisă.
