Έρευνα αντίθεσης CSS με υπολογισμένα styles — DedSec Project

Ένα κουμπί γλώσσας εμφανίζεται λευκό, ενώ το εικονίδιο δίπλα του έχει αλλάξει χρώμα. Η εικόνα αποδεικνύει τη διαφορά, όχι ποιος κανόνας ευθύνεται.

Βρες τον κανόνα που επικρατεί

1. Επίλεξε ακριβώς το κουμπί γλώσσας στα DevTools.
2. Διάβασε τις υπολογισμένες τιμές color, -webkit-text-fill-color, background-color και opacity. Έλεγξε χωριστά το ψευδοστοιχείο του εικονιδίου.
3. Αναζήτησε κανόνες με !important και υψηλή ειδικότητα. Ακόμη και το :not(#κάποιο-id) προσθέτει ειδικότητα ID.
4. Επαλήθευσε δύο διαφορετικά θέματα: μην αρχικοποιήσεις κατά λάθος την ίδια αποθηκευμένη επιλογή και στις δύο δοκιμές.
5. Διόρθωσε έναν κοινό κανόνα και έλεγξε όλες τις σελίδες που τον χρησιμοποιούν.

Μικρός έλεγχος

const btn = document.querySelector('#merged-lang');
const style = getComputedStyle(btn);
console.log(style.color, style.webkitTextFillColor, style.backgroundColor);

Το χρώμα του γονικού στοιχείου δεν εγγυάται ότι οι ετικέτες και τα εικονίδια το κληρονομούν.

Πότε τελείωσε

Κατέγραψε ποιος κανόνας επικρατούσε, τις τιμές και στα δύο θέματα και εικόνες από browser. Η σταθερή μπάρα πρέπει να καλύπτει το κείμενο που κυλά πίσω της, ενώ τα πλαίσια άρθρων πρέπει να παραμένουν ευανάγνωστα.