Μια συλλογή από συμβουλές για να φτάσατε τις CSS ικανότητές σας σε επαγγελματικό επίπεδο

Για άλλες ωραίες λίστες με συμβουλές δείτε την λίστα του @sindresorhus με τέλειες λίστες.

• Προχωρημένες Συμβουλές
• Υποστήριξη
• Μεταφράσεις

1. Χρήση μίας CSS επαναφοράς
2. Κληρονόμιση του 'box-sizing'
3. Χρήση unset Αντί Για Επαναφορά Όλων Των Ιδιοτήτων
4. Χρήση :not() για Εφαρμόσεις/Βγάλεις τα Πλαίσια κατά την Περιήγηση
5. Überprüfen Sie, ob die Schriftart lokal installiert ist
6. Προσθήκη line-height στο body
7. Θέσε :focus για Στοιχεία της Φόρμας
8. Κάθετο-Κεντράρισμα Όλων
9. Λίστες που Χωρίζονται-με-Κόμμα
10. Επίλογη Αντικειμένων με Χρήση Αρνητικού nth-child
11. Χρήση SVG για Εικονίδια
12. Χρήση της "Λοβοτομημένης Κουκουβάγιας" για Διαλέκτη
13. Χρήση max-height για Αγνούς CSS Ολισθητές
14. Ίσου-Πλάτους Κελία Πίνακα
15. Απέβαλλε τα Hacks των Περιθωρίων Με Flexbox
16. Χρήση Επιλογής Χαρακτηριστικών με Κένα Links
17. Δώσε στυλ στα "Προκαθορισμένα" Links
18. Εσωτερικά Κουτία Αναλογιών
19. Εικόνες με Χαλασμένο Στυλ
20. Χρήση rem για Προσαρμογή Μεγέθους Παντού; Χρήση em για Τοπική Προσαρμογή Μεγέθους
21. Απόκριψη Βίντεο με Αυτόματη Αναπαραγωγή Που Δεν Είναι σε Σίγαση
22. Χρήση :root για Ευέλικτη Γραφή
23. Ανάθεση font-size στα Στοιχεία της Φόρμας για Καλύτερη Εμπειρία από Κινητό
24. Χρήση Γεγονότων Δείκτη για Έλεγχο Γεγονότων του Ποντικιού
25. Ανάθεση display: none στο Τέλος των Γραμμών που Χρησιμοποιείται σαν Κενό

Η επαναφορά του CSS βοηθάει στο στυλ αλλά καί στην σταθερότητα ανάμεσα σε διαφορετικόυς περιηγητές αναζήτησης με καθαρό πίνακα για στυλιστικά στοιχεία.Μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη CSS επαναφοράς ετσι Normalize, και αλλα., η μπορείτε να χρησιμοποιήσετε μια πιο απλοποιημένη προσέγγιση επαναφοράς:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Τωρα τα στοιχεία θα βγουν από τα περιθώρια και από την επένδυση, και το box-sizing σε αφήνει να διαχειριστείς τις διατάξεις με το CSS box model.

Σημείωση: Αν ακολουθήσετε την Κληρονόμιση του 'box-sizing' σαν tip θα πρέπει να μην συμπεριληφθεί το 'box-sizing' στην CSS επαναφορά.

^{πίσω στον πίνακα περιεχομένων}

Ας κληρονομιθεί το box-sizing από html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Αυτό κάνει πιο εύκολο να αλλάξει το box-sizing σε πρόσθετα η σε άλλα συστατικά που μοχλεύουν άλλη συμπεριφορά.

^{πίσω στον πίνακα περιεχομένων}

Όταν επαναφέρεις τις ιδιότητες ενός στοιχείου δεν είναι απαραίτητο να επαναφέρεις τις ιδιότητες κάθε ξεχωριστού στοιχείου:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Μπορείς να καθορίσεις όλες τις ιδιότητες ενός στοιχείου χρησιμοποιόντας το all στενογραφημένο. Αν θέσεις την τιμή σε unset άλλαζει τις ιδιότητες ενός στοιχείου στις αρχικές:

button {
  all: unset;
}

^{πίσω στον πίνακα περιεχομένων}

Αντί να θέσεις το περιθώριο...

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...και μετά να το βγάλεις από το τελευταίο στοιχείο...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...χρησιμοποίησε το :not() μια ψευδοκλάση που εφαρμόζεται μόνο στα στοιχεία που θες:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Εδώ, ο 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σε κάθε <p>, <h*>, et al. ξεχωριστά. Αντ'αυτού, πρόσθεσέ το body:

body {
  line-height: 1.5;
}

Με αυτόν τον τρόπο τα στοιχεία κειμένου μπορούν να κληρονομήσουν από το body έυκολα.

^{πίσω στον πίνακα περιεχομένων}

Όσοι χρήστες έχουν όραση και χρησιμοποιούν πληκτρολογιο μπορούν να βασιστούν στην συγκέντωση για να αποφασίσουν που πηγαίνουν τα γεγονότα του πληκτρολογίου στην σελίδα.Κάντε τα στοίχεια συγκέντρωσης να ξεχωρίζουν και σταθερά σε μια προκαθορισμένη εφαρμογή του 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:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Θέλετε να κεντραρίσετε κάτι άλλο? Vertically, Κάθετα, οριζόντια...όπως θέλετε,όποτε θέλετε, παντού? Το CSS-Tricks έχει a nice write-up on doing all of that.

^{πίσω στον πίνακα περιεχομένων}

Κάντε τα αντικείμενα λίστας να φαίνονται σαν πραγματικές, χωρισμένες-με-κόμμα λίστες:

ul > li:not(:last-child)::after {
  content: ",";
}

Χρησιμοποιείστε την :not() ψευδοκλάση και κανένα κόμμα δεν θα προσθεθεί στο τελευταίο αντικείμενο.

Σημείωση: Αυτο το tip μπορεί να μην είναι ιδανικό για προσβασιμότητα, ειδικά για αυτούς που διαβάζουν απο οθόνη. Και το copy/paste από τον browser δεν δουλεύει με περιεχόμενο CSS-generated.Συνεχίστε με προσοχή.

^{πίσω στον πίνακα περιεχομένων}

Χρηιμοποιείστε το αρνητικό 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 για εικονίδια:

.logo {
  background: url("logo.svg");
}

το SVG κλιμακώνεται ωραία με για όλους τους τύπους ανάλυσης και υποστηρίζεται από όλους του περιηγητές back to IE9. Ρίξτε τα .png, .jpg, or .gif-jif-whatev αρχεία σας.

Σημείωση: Αν έχετε μόνο SVG εικονίδια για κουμπιά για τους χρήστες με όραση και το SVG αποτύχει να φορτωθεί, αυτό θα βοηθήσει να διατηρηθεί η προσβασιμότητα:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

^{πίσω στον πίνακα περιεχομένων}

Μπορεί να έχει περίεργο όνομα αλλά το να χρησιμοποιείς τον καθολικό επιλέκτη (*) μαζί με τον παρακείμενο επιλέκτη (+) μπορεί να παρέχει μια ισχυρή CSS δυνατότητα:

* + * {
  margin-top: 1.5em;
}

Σε αυτό το παράδειγμα, όλα τα στοιχεία στην ροή του αρχείου που ακολουθεί άλλα στοιχεία θα παραλάβει margin-top: 1.5em.

Για περισσότερα πάνω στον επιλέκτη της "Λοβοτομημένης Κουκουβάγιας", διαβάστε Heydon Pickering's post πάνω στο A List Apart.

^{πίσω στον πίνακα περιεχομένων}

Εφαρμογή σε 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 για να διατηρίσετε τα κελία με ίδιο πλάτος:

.calendar {
  table-layout: fixed;
}

Χωρίς-κόπο διατάξεις πινάκων.

^{πίσω στον πίνακα περιεχομένων}

Οτάν δουλέυεις με αυλάκια στήλης μπορείς να ξεφορτοθείς το nth-, first-, και last-child hacks με την χρήση της ιδιότητας του flexbox space-between :

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Τώρα τα αυλάκια των στηλών φαίνονται ίσα κατανεμημένα.

^{πίσω στον πίνακα περιεχομένων}

Εμφανίστε τα links όταν το <a> στοιχείο δεν έχει τιμή αλλά το href πεδίο εχει ενα link:

a[href^="http"]:empty::before {
  content: attr(href);
}

Αυτό είναι πολύ βολικό.

^{πίσω στον πίνακα περιεχομένων}

Προσθέστε στυλ στα "προκαθορισμένα" links:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Τωρα τα 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 αρχικό ποστ.

^{πίσω στον πίνακα περιεχομένων}

Αφού θέσετε το βασικό μέγεθος γραμματοσειράς στο root (html { font-size: 100%; }), θέστε το μέγεθος γραμματοσειράς για στοιχεία κειμένου σε em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Έπειτα θέστε το μέγεθος γραμματοσειράς για τις ενότητες σε rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Τώρα κάθε ενότητα διαχωρίζεται και είναι ευκολότερο να της δώσεις στυλ, πιο συντιρίσιμη, και ευπροσάρμοστη.

^{πίσω στον πίνακα περιεχομένων}

Αυτό είναι ένα ωραίο κόλπο για έναν στυλ συνιθισμένου χρήστη. Αποφυγή κατακλυσμού χρήστη με ήχους από ενα βίντεο το οποίο παίζει αυτόματα όταν φορτωθεί η σελίδα. Αν ο ήχος δεν είναι σε σίγαση, μήν δείχνεις το βίντεο:

video[autoplay]:not([muted]) {
  display: none;
}

Για άλλη μία φορά,εκμεταλλευόμαστε την χρήση της :not() ψευδοκλάσης.

^{πίσω στον πίνακα περιεχομένων}

Ο τύπος της γραμματοσειράς σε μια αποκρίσιμη διαρρύθμιση θα πρέπει να είναι ικάνος να προσαρμόζεται με κάθε θέαση. Μπορείτε να υπολογίσετε το μέγεθος γραμματοσειράς με βάση το ύψος και το πλάτος της θέασης χρησιμοποιόντας το :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Τώρα μπορείτε να χρησιμοποιήσετε την root em μονάδα βασισμένη στην τιμή που υπολογίστηκε από το :root:

body {
  font: 1rem/1.6 sans-serif;
}

^{πίσω στον πίνακα περιεχομένων}

Για να αποτρέψετε τους περιηγητές των κινητών (iOS Safari, et al.) απο το να μεγεθύνουν στα στοιχεία της HTML φόρμας όταν ένα <select> αναπτυσόμενο μενού επιλεχθέι στην οθόνη, προσθέστο το font-size στον κανόνα του επιλέκτη:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

^{πίσω στον πίνακα περιεχομένων}

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

button:disabled {
  opacity: .5;
  pointer-events: none;
}

Είναι τόσο απλό.

^{πίσω στον πίνακα περιεχομένων}

Καθώς ο Harry Roberts επισήμανε, αυτό μπορει να βοηθήσει τους CMS χρήστες να αποφύγουν την χρήση παραπάνω νέων γραμμών αντί για κένο :

br + br {
  display: none;
}

^{πίσω στον πίνακα περιεχομένων}

Οι τωρινές εκδόσεις των Chrome, Firefox, Safari, καθώς και Edge.

^{πίσω στον πίνακα περιεχομένων}