Μια συλλογή από συμβουλές για να φτάσατε τις CSS ικανότητές σας σε επαγγελματικό επίπεδο
Για άλλες ωραίες λίστες με συμβουλές δείτε την λίστα του [@sindresorhus](https://github.com/sindresorhus/) με τέλειες λίστες.
unset
Αντί Για Επαναφορά Όλων Των Ιδιοτήτων
:not()
για Εφαρμόσεις/Βγάλεις τα Πλαίσια κατά την
Περιήγηση
line-height
στο body
:focus
για Στοιχεία της Φόρμας
nth-child
max-height
για Αγνούς CSS Ολισθητές
rem
για Προσαρμογή Μεγέθους Παντού; Χρήση
em
για Τοπική Προσαρμογή Μεγέθους
:root
για Ευέλικτη Γραφή
font-size
στα Στοιχεία της Φόρμας για Καλύτερη
Εμπειρία από Κινητό
display: none
στο Τέλος των Γραμμών που
Χρησιμοποιείται σαν Κενό
Η επαναφορά του CSS βοηθάει στο στυλ αλλά καί στην σταθερότητα ανάμεσα σε διαφορετικόυς περιηγητές αναζήτησης με καθαρό πίνακα για στυλιστικά στοιχεία.Μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη CSS επαναφοράς ετσι Normalize, και αλλα., η μπορείτε να χρησιμοποιήσετε μια πιο απλοποιημένη προσέγγιση επαναφοράς:
Τωρα τα στοιχεία θα βγουν από τα περιθώρια και από την επένδυση, και το
box-sizing
σε αφήνει να διαχειριστείς τις διατάξεις με το CSS
box model.
Σημείωση: Αν ακολουθήσετε την Κληρονόμιση του ‘box-sizing’ σαν tip θα πρέπει να μην συμπεριληφθεί το ‘box-sizing’ στην CSS επαναφορά.
Ας κληρονομιθεί το box-sizing
από html
:
Αυτό κάνει πιο εύκολο να αλλάξει το box-sizing
σε πρόσθετα η
σε άλλα συστατικά που μοχλεύουν άλλη συμπεριφορά.
unset
Αντί Για Επαναφορά Όλων Των Ιδιοτήτων
Όταν επαναφέρεις τις ιδιότητες ενός στοιχείου δεν είναι απαραίτητο να επαναφέρεις τις ιδιότητες κάθε ξεχωριστού στοιχείου:
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
Μπορείς να καθορίσεις όλες τις ιδιότητες ενός στοιχείου χρησιμοποιόντας το
all
στενογραφημένο. Αν θέσεις την τιμή σε
unset
άλλαζει τις ιδιότητες ενός στοιχείου στις αρχικές:
Σημείωση: η στενογραφία «allκαι
unset` δεν
υποστηρίζεται στο IE11.
:not()
για Εφαρμόσεις/Βγάλεις τα Πλαίσια κατά την
Περιήγηση
Αντί να θέσεις το περιθώριο…
…και μετά να το βγάλεις από το τελευταίο στοιχείο…
…χρησιμοποίησε το :not()
μια ψευδοκλάση που εφαρμόζεται μόνο
στα στοιχεία που θες:
Εδώ, ο CSS επιλέκτης διαβάστηκε όπως αν το περιέγραφε ένας άνθρωπος.
Sie können überprüfen, ob eine Schriftart lokal installiert ist, bevor Sie sie remote abrufen. Dies ist auch ein guter Leistungstipp.
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}
Hutspitze an Adam Argyle für das Teilen dieses Protips und dieser Demo.
line-height
στο body
Δεν χρειάζεται να προσθέσεις line-height
σε κάθε
<p>
, <h*>
, et al.
ξεχωριστά. Αντ’αυτού, πρόσθεσέ το body
:
Με αυτόν τον τρόπο τα στοιχεία κειμένου μπορούν να κληρονομήσουν από το
body
έυκολα.
:focus
για Στοιχεία της Φόρμας
Όσοι χρήστες έχουν όραση και χρησιμοποιούν πληκτρολογιο μπορούν να βασιστούν στην συγκέντωση για να αποφασίσουν που πηγαίνουν τα γεγονότα του πληκτρολογίου στην σελίδα.Κάντε τα στοίχεια συγκέντρωσης να ξεχωρίζουν και σταθερά σε μια προκαθορισμένη εφαρμογή του browser:
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}
Όχι δεν είναι μαύρη μαγεία, μπορείτε όντως να κεντράρετε τα στοιχεία κάθετα. Μπορείτε να το κάνετε αυτό με flexbox…
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
…και επίσης με CSS Grid:
Θέλετε να κεντραρίσετε κάτι άλλο? Vertically, Κάθετα, οριζόντια…όπως θέλετε,όποτε θέλετε, παντού? Το CSS-Tricks έχει a nice write-up on doing all of that.
Σημείωση: Προσοχή για ενδεχόμενη buggy συμπεριφορά with flexbox in IE11.
Κάντε τα αντικείμενα λίστας να φαίνονται σαν πραγματικές, χωρισμένες-με-κόμμα λίστες:
Χρησιμοποιείστε την :not()
ψευδοκλάση και κανένα κόμμα δεν θα
προσθεθεί στο τελευταίο αντικείμενο.
Σημείωση: Αυτο το tip μπορεί να μην είναι ιδανικό για προσβασιμότητα, ειδικά για αυτούς που διαβάζουν απο οθόνη. Και το copy/paste από τον browser δεν δουλεύει με περιεχόμενο CSS-generated.Συνεχίστε με προσοχή.
nth-child
Χρηιμοποιείστε το αρνητικό nth-child
στην CSS για να
επιλέξετε 1 αντικείμενο από τα n.
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}
Η, αφού ήδη μάθατε να σχετικά με το
using :not()
, δοκιμάστε:
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: block;
}
Δεν υπάρχει λόγος να μην χρησιμοποιήσετε SVG για εικονίδια:
το SVG κλιμακώνεται ωραία με για όλους τους τύπους ανάλυσης και υποστηρίζεται από όλους του περιηγητές back to IE9. Ρίξτε τα .png, .jpg, or .gif-jif-whatev αρχεία σας.
Σημείωση: Αν έχετε μόνο SVG εικονίδια για κουμπιά για τους χρήστες με όραση και το SVG αποτύχει να φορτωθεί, αυτό θα βοηθήσει να διατηρηθεί η προσβασιμότητα:
Μπορεί να έχει περίεργο όνομα αλλά το να χρησιμοποιείς τον καθολικό
επιλέκτη (*
) μαζί με τον παρακείμενο επιλέκτη
(+
) μπορεί να παρέχει μια ισχυρή CSS δυνατότητα:
Σε αυτό το παράδειγμα, όλα τα στοιχεία στην ροή του αρχείου που ακολουθεί
άλλα στοιχεία θα παραλάβει margin-top: 1.5em
.
Για περισσότερα πάνω στον επιλέκτη της “Λοβοτομημένης Κουκουβάγιας”, διαβάστε Heydon Pickering’s post πάνω στο A List Apart.
max-height
για Αγνούς CSS Ολισθητές
Εφαρμογή σε CSS-only διαφάνεις με χρήση max-height
με την
υπερχύλιση κρυμμένη:
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
Το στοιχείο επεκτείνεται στην max-height
τιμή σε περίπτωση
αιώρησης του δέικτη από πάνω και οι η διαφάνεια προβάλλει σας αποτέλεμα
υπερχύλισης.
Οι πίνακες μπορεί να είναι δύσκολοι να δουλέψει κανείς. Προσπαθήστε να
χρησιμοποιήσετε το table-layout: fixed
για να διατηρίσετε τα
κελία με ίδιο πλάτος:
Χωρίς-κόπο διατάξεις πινάκων.
Οτάν δουλέυεις με αυλάκια στήλης μπορείς να ξεφορτοθείς το
nth-
, first-
, και last-child
hacks
με την χρήση της ιδιότητας του flexbox space-between
:
Τώρα τα αυλάκια των στηλών φαίνονται ίσα κατανεμημένα.
Εμφανίστε τα links όταν το <a>
στοιχείο δεν έχει τιμή
αλλά το href
πεδίο εχει ενα link:
Αυτό είναι πολύ βολικό.
Προσθέστε στυλ στα “προκαθορισμένα” links:
Τωρα τα link που εισχωρήθηκαν μεσω CMS, που συνήθς δεν έχουν πεδίο
class
, θα διαφοροποιούνται χωρίς να επηρεάζουν την γενική
αλληλουχία.
Για να φτιάξετε ενα κουτί με εσωτερική αναλογία, το μόνο που πρέπει να κάνετε είναι να εφαρμόσετε ενα top η bottom γέμισμα σε ένα div:
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Το να χρησιμοποιείς το 20% του γεμίσματος κάνει το ύψος του κουτιού ίσο με 20% απο το πλάτος του. Άσχετα με το πλάτος της θέας, το παιδί div θα κρατήσει την κλίμακά του (100% / 20% = 5:1).
Κάντε τις χαλασμένες εικόνες πιο αισθητικά όμορφες με λίγο CSS:
img {
display: block;
font-family: sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
Τώρα προσθέστε ψευδόστοιχείων κανόνες για να εμφανίσετε ένα μύνημα χρήστη και μια αναφορά σε URL από την χαλασμένη εικόνα:
img::before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
Μάθετε περισσότερα σχετικά με το στυλ για αυτό το μοτίβο στού Ire Aderinokun’s αρχικό ποστ.
rem
για Προσαρμογή Μεγέθους Παντού; Χρήση
em
για Τοπική Προσαρμογή Μεγέθους
Αφού θέσετε το βασικό μέγεθος γραμματοσειράς στο root (html { font-size: 100%; }
), θέστε το μέγεθος γραμματοσειράς για στοιχεία κειμένου σε
em
:
Έπειτα θέστε το μέγεθος γραμματοσειράς για τις ενότητες σε
rem
:
Τώρα κάθε ενότητα διαχωρίζεται και είναι ευκολότερο να της δώσεις στυλ, πιο συντιρίσιμη, και ευπροσάρμοστη.
Αυτό είναι ένα ωραίο κόλπο για έναν στυλ συνιθισμένου χρήστη. Αποφυγή κατακλυσμού χρήστη με ήχους από ενα βίντεο το οποίο παίζει αυτόματα όταν φορτωθεί η σελίδα. Αν ο ήχος δεν είναι σε σίγαση, μήν δείχνεις το βίντεο:
Για άλλη μία φορά,εκμεταλλευόμαστε την χρήση της
:not()
ψευδοκλάσης.
:root
για Ευέλικτη Γραφή
Ο τύπος της γραμματοσειράς σε μια αποκρίσιμη διαρρύθμιση θα πρέπει να
είναι ικάνος να προσαρμόζεται με κάθε θέαση. Μπορείτε να υπολογίσετε το
μέγεθος γραμματοσειράς με βάση το ύψος και το πλάτος της θέασης
χρησιμοποιόντας το :root
:
Τώρα μπορείτε να χρησιμοποιήσετε την root em
μονάδα βασισμένη
στην τιμή που υπολογίστηκε από το :root
:
font-size
στα Στοιχεία της Φόρμας για Καλύτερη
Εμπειρία από Κινητό
Για να αποτρέψετε τους περιηγητές των κινητών (iOS Safari,
et al.) απο το να μεγεθύνουν στα στοιχεία της HTML φόρμας όταν
ένα <select>
αναπτυσόμενο μενού επιλεχθέι στην οθόνη,
προσθέστο το font-size
στον κανόνα του επιλέκτη:
:dancer:
Γεγονότα ποντικού σου επιτρέπουν να καθορίσεις πώς το ποντίκι αλληλεπιδρά με ένα στοιχείο που ακουμπάει. Για να απενεργοποιήσετε το προκαθορισμένο γεγονός ποντικιου πάνω σε ένα κουμπί, για παράδειγμα:
Είναι τόσο απλό.
display: none
στο Τέλος των Γραμμών που
Χρησιμοποιείται σαν Κενό
Καθώς ο Harry Roberts επισήμανε, αυτό μπορει να βοηθήσει τους CMS χρήστες να αποφύγουν την χρήση παραπάνω νέων γραμμών αντί για κένο :
Οι τωρινές εκδόσεις των Chrome, Firefox, Safari, Opera, Edge, καθώς και IE11.