Regula CSS !important
Acordarea celei mai mari priorități unei proprietăți CSS este rolul regulii !important.
Pentru acea proprietate pe acel element, toate regulile de stil anterioare pierd în fața ei.
Cuvântul cheie se scrie ultimul într-o declarație CSS, chiar înainte de punct și virgulă.
Sintaxă
selector {
property: value !important;
}
Exemplu de regulă CSS !important
Stilul inline, selectorul de id și selectorul de clasă de mai jos au toate o specificitate mai mare decât regula simplă pentru paragraf, și totuși toate cele trei paragrafe ajung cu fundal galben. Pentru această proprietate pe aceste elemente, !important învinge orice altă regulă de stil.
Exemplu
Iată cum se comportă regula în practică:
p cu background-color: yellow !important pentru a le suprascrie pe toate, demonstrând că !important are prioritate față de stilurile inline, selectorii de clasă și selectorii de id.
Rezultat: pagină HTML completă "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS !important Override</title>
<style>
p {
background-color: yellow !important;
}
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
</style>
</head>
<body>
<p style="background-color:orange;">This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>
Folosiți !important cu moderație
O regulă !important pierde doar în fața altei reguli !important, plasată pe o declarație cu aceeași (sau mai mare) specificitate în codul sursă.
Odată scris astfel, codul devine confuz și greu de depanat, iar o foaie de stil mare înrăutățește situația.
Exemplu
Aici este greu de spus care dintre aceste culori contează drept cea mai importantă:
p, un selector de id #myid și un selector de clasă .myclass, toate folosind !important pentru background-color (roșu, albastru, gri). Demonstrați că, atunci când mai multe reguli !important intră în conflict, specificitatea normală determină câștigătorul.
Rezultat: pagină HTML completă "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple !important Rules</title>
<style>
p {
background-color: red !important;
}
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is a paragraph.</p>
</body>
</html>
Câteva utilizări corecte ale !important
Chiar și așa, există câteva cazuri în care regula !important este utilă:
1. Suprascrierea unui stil pe care nu ai altă cale de a-l suprascrie. Un Sistem de Gestionare a Conținutului (CMS) al cărui cod CSS nu îl poți edita este o astfel de situație: stilurile tale personalizate pot folosi regula pentru a învinge unele dintre stilurile CMS-ului.
2. Respectarea preferințelor utilizatorului. Persoanele cu sensibilitate la mișcare pot prefera site-uri cu mai puțină animație. Funcția prefers-reduced-motion a lui @media îți spune dacă cineva a cerut mișcare redusă, cum ar fi animații sau tranziții. Dacă a activat această setare pe calculatorul său, !important poate dezactiva sau atenua aceste efecte.
3. Fixarea unui stil foarte specific pentru un anumit tip de element. Să zicem că toate butoanele-link de pe o pagină trebuie să aibă același aspect special. Plasarea unuia în interiorul altui element cu specificitate mai mare poate face proprietățile să intre în conflict, așa că adăugarea lui !important la proprietățile butonului impune același aspect tuturor.
Media queries au propriul capitol mai târziu în curs.
Exemplu cu mișcare redusă
@media (prefers-reduced-motion: reduce) care folosește !important pentru a dezactiva toate animațiile și tranzițiile pentru utilizatorii care preferă mișcare redusă. Includeți un element animat simplu pentru ca efectul să fie vizibil.
Rezultat: pagină HTML completă "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reduced Motion with !important</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
from { margin-left: 0px; }
to { margin-left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>Prefers Reduced Motion</h1>
<p>The red box below will animate, unless the user has enabled "reduce motion" in their system settings.</p>
<div></div>
</body>
</html>
Buton-link de bază
Mai întâi, butoanele-link: culoare de fundal gri, text alb, plus padding și un border:
a.button cu un fundal gri (#8c8c8c), text alb, padding de 5px, bordură de 1px solid black și fără decorare de text.
Rezultat: pagină HTML completă "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button Styling</title>
<style>
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Link Button</h1>
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</body>
</html>
Conflict de buton-link
Pune un buton-link într-un element cu specificitate mai mare, iar proprietățile lui pot intra în conflict:
a.button (fundal gri, text alb, padding 5px, bordură 1px solid black, fără decorare de text) plasat într-un div cu id-ul „myDiv”. Adăugați o regulă #myDiv a care setează culoarea la roșu și culoarea de fundal la galben, demonstrând conflictul de specificitate.
Rezultat: pagină HTML completă "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button Specificity Conflict</title>
<style>
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Link Button Conflict</h1>
<div id="myDiv">
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</div>
</body>
</html>
Buton-link cu !important
Marcarea proprietăților butonului cu !important face ca toate butoanele să arate la fel, indiferent ce le înconjoară:
a.button folosind !important pe toate proprietățile (fundal gri #8c8c8c, text alb, padding 5px, bordură 1px solid black, fără decorare de text) plasat într-un div cu id-ul „myDiv”. Adăugați o regulă #myDiv a cu culoare roșie și fundal galben pentru a arăta că stilurile butonului cu !important câștigă.
Rezultat: pagină HTML completă "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Button with !important</title>
<style>
a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Link Button with !important</h1>
<div id="myDiv">
<p><a href="https://prompt-cookbook.com" class="button">This is a link button</a></p>
</div>
</body>
</html>