Διαφορετικοί ιστότοποι περιλαμβάνουν το εξωτερικό Διαδοχικά φύλλα στυλ με διαφορετικούς τρόπους — είτε χρησιμοποιώντας την προσέγγιση @import είτε συνδέοντας με αυτό το αρχείο CSS. Ποια είναι η διαφορά μεταξύ του @import και του συνδέσμου για το CSS και πώς αποφασίσατε ποιο είναι καλύτερο για εσάς;
Η διαφορά μεταξύ @import και Link
Η σύνδεση είναι η πρώτη μέθοδος για τη συμπερίληψη ενός εξωτερικού φύλλου στυλ στις ιστοσελίδες σας. Προορίζεται να συνδέσει τη σελίδα σας με το φύλλο στυλ σας. Προστίθεται στο κεφάλι σας Έγγραφο HTML.
Η εισαγωγή σάς επιτρέπει να εισάγετε ένα φύλλο στυλ σε ένα άλλο. Αυτό είναι ελαφρώς διαφορετικό από το σενάριο συνδέσμου, επειδή μπορείτε να εισαγάγετε φύλλα στυλ μέσα σε ένα συνδεδεμένο φύλλο στυλ.
Από άποψη προτύπων, δεν υπάρχει διαφορά μεταξύ σύνδεσης σε εξωτερικό φύλλο στυλ ή εισαγωγής του. Οποιοσδήποτε τρόπος είναι σωστός και κάθε τρόπος θα λειτουργεί εξίσου καλά στις περισσότερες περιπτώσεις. Ωστόσο, υπάρχουν μερικοί λόγοι που ίσως θέλετε να χρησιμοποιήσετε ο ένας πάνω στον άλλο.
Γιατί να χρησιμοποιήσετε το @import;
Πριν από πολλά χρόνια, ο πιο συνηθισμένος λόγος που δόθηκε για τη χρήση του @import αντί (ή μαζί με) είναι επειδή τα παλαιότερα προγράμματα περιήγησης δεν αναγνώρισαν το @import, οπότε μπορείτε να αποκρύψετε στυλ από αυτά. Με την εισαγωγή των φύλλων στυλ σας, ουσιαστικά θα τα διαθέσατε σε πιο μοντέρνα προγράμματα περιήγησης συμβατά με τα πρότυπα, ενώ θα τα "αποκρύψετε" από το παλαιότερες εκδόσεις προγράμματος περιήγησης.
Μια άλλη χρήση για τη μέθοδο @import είναι η χρήση πολλών φύλλων στυλ σε μια σελίδα, ενώ περιλαμβάνει μόνο έναν σύνδεσμο στην κεφαλή του εγγράφου σας. Για παράδειγμα, μια εταιρεία μπορεί να έχει ένα καθολικό φύλλο στυλ για κάθε σελίδα στον ιστότοπο, με τις υποενότητες να έχουν πρόσθετα στυλ που ισχύουν μόνο για αυτήν την υποενότητα. Συνδέοντας το φύλλο στυλ της υποενότητας και εισάγοντας τα καθολικά στυλ στην κορυφή αυτού του στυλ φύλλο, δεν χρειάζεται να διατηρείτε ένα γιγαντιαίο φύλλο στυλ με όλα τα στυλ για τον ιστότοπο και κάθε υποδιαίρεση. Η μόνη απαίτηση είναι ότι τυχόν κανόνες @import πρέπει να ακολουθούν τους υπόλοιπους κανόνες στυλ. Κληρονομία μπορεί ακόμα να είναι ένα πρόβλημα.
Γιατί να χρησιμοποιήσετε το σύνδεσμο;
Ο νούμερο 1 λόγος για τη χρήση συνδεδεμένων φύλλων στυλ είναι η παροχή εναλλακτικών φύλλων στυλ για τους πελάτες σας. Τα προγράμματα περιήγησης όπως το Firefox, το Safari και το Opera υποστηρίζουν το χαρακτηριστικό rel = "alternate stylesheet" και όταν υπάρχει ένα διαθέσιμο θα επιτρέψουν στους θεατές να κάνουν εναλλαγή μεταξύ τους. Μπορείτε επίσης να χρησιμοποιήσετε έναν διακόπτη JavaScript για εναλλαγή μεταξύ φύλλων στυλ στο IE - που χρησιμοποιείται συχνότερα με Μεγέθυνση διατάξεων για σκοπούς προσβασιμότητας.
Ένα από τα μειονεκτήματα στη χρήση του @import είναι ότι εάν έχετε μια πολύ απλή κεφαλή με τον κανόνα @import σε αυτήν, οι σελίδες σας ενδέχεται να εμφανίζουν μια "λάμψη ασταθούς περιεχομένου" καθώς φορτώνουν. Μια απλή λύση σε αυτό είναι να βεβαιωθείτε ότι έχετε τουλάχιστον έναν επιπλέον σύνδεσμο ή στοιχείο σεναρίου στο μυαλό σας.
Τι γίνεται με τον τύπο πολυμέσων;
Πολλοί συγγραφείς ισχυρίζονται ότι μπορείτε να χρησιμοποιήσετε τον τύπο πολυμέσων για να αποκρύψετε φύλλα στυλ από παλαιότερα προγράμματα περιήγησης. Συχνά, αναφέρουν αυτήν την ιδέα ως πλεονέκτημα για τη χρήση του @import ή, αλλά μπορείτε να ρυθμίσετε τα μέσα πληκτρολογήστε με οποιαδήποτε από τις δύο μεθόδους και τα παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν τύπους πολυμέσων δεν θα τα βλέπουν ούτε σε κανένα υπόθεση.
Ποια μέθοδος πρέπει να χρησιμοποιήσετε;
Οι περισσότεροι προγραμματιστές χρησιμοποιούν σήμερα σύνδεσμο και, στη συνέχεια, εισάγουν φύλλα στυλ σε εξωτερικά φύλλα στυλ. Με αυτόν τον τρόπο, έχετε μόνο μία ή δύο γραμμές κώδικα για προσαρμογή στα έγγραφα HTML. Αλλά η ουσία είναι ότι εξαρτάται από εσάς. Εάν είστε πιο άνετοι με το @import, τότε κάντε το! Και οι δύο μέθοδοι είναι συμβατές με τα πρότυπα και εκτός και αν σχεδιάζετε να υποστηρίξετε πραγματικά παλιά προγράμματα περιήγησης, δεν υπάρχει κανένας ισχυρός λόγος για τη χρήση τους.