Τα περιγράμματα του CSS είναι κάτι περισσότερο από ένα σύνορο
Η ιδιοκτησία περιγράμματος CSS είναι μια ιδιότητα που προκαλεί σύγχυση. Όταν μάθετε για πρώτη φορά σχετικά με αυτό, είναι δύσκολο να καταλάβουμε πώς είναι ακόμη και απομακρυσμένα από την ιδιοκτησία των συνόρων. Το W3C εξηγεί ότι έχει τις εξής διαφορές:
- Τα περιγράμματα δεν καταλαμβάνουν χώρο.
- Τα περιγράμματα μπορεί να μην είναι ορθογώνια.
Τα περιγράμματα δεν καταλαμβάνουν χώρο
Αυτή η δήλωση, από μόνη της, προκαλεί σύγχυση. Πώς μπορεί ένα αντικείμενο στην ιστοσελίδα σας να μην καταλαμβάνει χώρο στην ιστοσελίδα; Αλλά εάν σκέφτεστε ότι η ιστοσελίδα σας είναι σαν ένα κρεμμύδι, κάθε στοιχείο στη σελίδα μπορεί να είναι στρωμένο πάνω σε ένα άλλο αντικείμενο. Η ιδιοκτησία περιγράμματος δεν καταλαμβάνει χώρο, επειδή τοποθετείται πάντοτε στην κορυφή του πλαισίου του στοιχείου.
Όταν ένα περίγραμμα τοποθετείται γύρω από ένα στοιχείο, δεν έχει καμία επίδραση στον τρόπο με τον οποίο το στοιχείο αυτό είναι τοποθετημένο στη σελίδα. Δεν αλλάζει το μέγεθος ή τη θέση του στοιχείου. Αν βάζετε ένα περίγραμμα σε ένα στοιχείο, θα πάρει το ίδιο διάστημα όπως και αν δεν έχετε ένα περίγραμμα αυτού του στοιχείου. Αυτό δεν ισχύει για ένα σύνορο. Ένα περίγραμμα σε ένα στοιχείο προστίθεται στο εξωτερικό πλάτος και ύψος του στοιχείου. Έτσι, αν είχατε μια εικόνα πλάτους 50 εικονοστοιχείων, με όριο 2 εικονοστοιχείων, θα χρειαζόταν 54 pixels (2 εικονοστοιχεία για κάθε πλευρικό περίγραμμα). Η ίδια εικόνα με περίγραμμα 2-pixel θα έχει πλάτος μόλις 50 pixel στη σελίδα σας, το περίγραμμα θα εμφανίζεται πάνω από το εξωτερικό άκρο της εικόνας.
Τα περιγράμματα μπορεί να είναι μη ορθογώνια
Πριν αρχίσετε να σκέφτεστε "δροσερό, τώρα μπορώ να κάνω κύκλους!" Ξανασκέψου το. Αυτή η δήλωση έχει διαφορετικό νόημα από ό, τι νομίζετε. Όταν τοποθετείτε ένα περίγραμμα σε ένα στοιχείο, το πρόγραμμα περιήγησης ερμηνεύει το στοιχείο σαν να ήταν ένα γιγάντιο ορθογώνιο πλαίσιο. Εάν το κουτί χωρίζεται σε πολλές γραμμές, το πρόγραμμα περιήγησης απλώς αφήνει τα άκρα ανοιχτά επειδή το κουτί δεν είναι κλειστό. Είναι σαν το πρόγραμμα περιήγησης να βλέπει το περιθώριο με μια απείρως ευρεία οθόνη - αρκετά μεγάλη ώστε το περίγραμμα να είναι ένα συνεχές ορθογώνιο.
Αντίθετα, η ιδιότητα του περιγράμματος λαμβάνει υπόψη τις άκρες. Εάν ένα περιγραμμένο στοιχείο εκτείνεται σε πολλές γραμμές, το περίγραμμα κλείνει στο τέλος της γραμμής και ξανανοίγει στην επόμενη γραμμή. Αν είναι δυνατόν, το περίγραμμα θα παραμείνει πλήρως συνδεδεμένο επίσης, δημιουργώντας ένα μη ορθογώνιο σχήμα.
Χρήσεις της ιδιότητας περίγραμμα
Μία από τις καλύτερες χρήσεις της ιδιότητας περίγραμμα είναι να επισημάνει τους όρους αναζήτησης. Πολλοί ιστότοποι το κάνουν με ένα χρώμα φόντου, αλλά μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα περίγραμμα και να μην ανησυχείτε για την προσθήκη επιπλέον διαχωριστικών στις σελίδες σας.
Η ιδιότητα χρώματος περιγράμματος αποδέχεται τον όρο "invert" που κάνει το περίγραμμα να είναι το αντίστροφο του τρέχοντος φόντου. Αυτό σας επιτρέπει να επισημάνετε στοιχεία σε δυναμικές ιστοσελίδες χωρίς να χρειάζεται να γνωρίζετε ποια χρώματα χρησιμοποιούνται .
Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα περίγραμμα για να αφαιρέσετε τη διακεκομμένη γραμμή γύρω από ενεργούς συνδέσμους. Αυτό το άρθρο από το CSS-Tricks δείχνει πώς να αφαιρέσετε το διάστικτο περίγραμμα.