Έλεγχος υποστήριξης ιδιοτήτων CSS
Στο CSS υπάρχουν αρκετά παλιές ιδιότητες που υποστηρίζονται από όλα τα προγράμματα περιήγησης, και υπάρχουν νέες ιδιότητες που θα υποστηρίζονται μόνο στα πιο νέα προγράμματα περιήγησης, και μάλιστα όχι σε όλα.
Κατά την δημιουργία διάταξης (layout) πρέπει να παίρνετε την απόφαση σχετικά με το αν μπορείτε ήδη να χρησιμοποιήσετε μια συγκεκριμένη ιδιότητα. Για αυτό υπάρχει ένας ειδικός κανόνας: εάν η υποστήριξη μιας ιδιότητας απουσιάζει από προγράμματα περιήγησης που χρησιμοποιούνται από λιγότερο από ένα τοις εκατό των χρηστών, τότε η ιδιότητα μπορεί να χρησιμοποιηθεί.
Εδώ, ωστόσο, υπάρχουν αποχρώσεις. Γιατί υπάρχουν ιδιότητες,
η απουσία υποστήριξης των οποίων θα οδηγήσει στην καταστροφή
της διάταξης (layout) της ιστοσελίδας, για παράδειγμα, τα flexbox.
Και υπάρχουν
ιδιότητες, η λειτουργικότητα των οποίων δεν είναι ιδιαίτερα
κρίσιμη. Ας πούμε, οι μη λειτουργικές υποκοπές hyphens
δεν θα κάνουν την ιστοσελίδα πολύ χειρότερη.
Για να ελέγξετε την υποστήριξη μιας ιδιότητας από τα προγράμματα περιήγησης χρειάζεται να χρησιμοποιήσετε την υπηρεσία caniuse.com. Αυτή δείχνει την υποστήριξη της ιδιότητας από κάθε έκδοση όλων των προγραμμάτων περιήγησης, καθώς και το ποσοστό των χρηστών που χρησιμοποιεί κάθε μία από τις εκδόσεις.
Έχοντας αυτά τα δεδομένα, μπορείτε να σχηματίσετε γνώμη σχετικά με το αν μπορείτε ήδη να χρησιμοποιήσετε κάποια ιδιότητα. Επίσης, ορισμένες ιδιότητες μπορεί ακόμη και τώρα να απαιτούν προθέματα προμηθευτή (vendor prefixes) σε ορισμένες εκδόσεις προγραμμάτων περιήγησης, που ακόμη χρησιμοποιούνται από χρήστες. Πρέπει επίσης να δίνετε προσοχή σε αυτό.
Δώστε παραδείγματα ιδιοτήτων, η υποστήριξη των οποίων είναι κρίσιμη.
Δώστε παραδείγματα ιδιοτήτων, η υποστήριξη των οποίων δεν είναι κρίσιμη.
Ελέγξτε την υποστήριξη της ιδιότητας box-sizing.
Μπορείτε να τη χρησιμοποιήσετε ήδη;
Ελέγξτε την υποστήριξη της ιδιότητας hyphens.
Μπορείτε να τη χρησιμοποιήσετε ήδη;
Ελέγξτε την υποστήριξη της ιδιότητας animation.
Μπορείτε να τη χρησιμοποιήσετε ήδη;
Ελέγξτε την υποστήριξη της ιδιότητας flex.
Μπορείτε να τη χρησιμοποιήσετε ήδη;
Ελέγξτε την υποστήριξη της ιδιότητας grid.
Μπορείτε να τη χρησιμοποιήσετε ήδη;