Εξελιγμένες συμβουλές για CSS

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

Για άλλες ωραίες λίστες με συμβουλές δείτε την λίστα του [@sindresorhus](https://github.com/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 βοηθάει στο στυλ αλλά καί στην σταθερότητα ανάμεσα σε διαφορετικόυς περιηγητές αναζήτησης με καθαρό πίνακα για στυλιστικά στοιχεία.Μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη CSS επαναφοράς ετσι Normalize, και αλλα., η μπορείτε να χρησιμοποιήσετε μια πιο απλοποιημένη προσέγγιση επαναφοράς:

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

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

Demo

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

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

Κληρονόμιση του ‘box-sizing’

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

html {
  box-sizing: border-box;
}

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

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

Démo

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

Χρήση unset Αντί Για Επαναφορά Όλων Των Ιδιοτήτων

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

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

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

button {
  all: unset;
}

Σημείωση: η στενογραφία «allκαι unset` δεν υποστηρίζεται στο IE11.

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

Χρήση :not() για Εφαρμόσεις/Βγάλεις τα Πλαίσια κατά την Περιήγηση

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

/* 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 επιλέκτης διαβάστηκε όπως αν το περιέγραφε ένας άνθρωπος.

Demo

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

Überprüfen Sie, ob die Schriftart lokal installiert ist

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 {
  line-height: 1.5;
}

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

Demo

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

Θέσε :focus για Στοιχεία της Φόρμας

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

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Demo

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

Κάθετο-Κεντράρισμα Όλων

Όχι δεν είναι μαύρη μαγεία, μπορείτε όντως να κεντράρετε τα στοιχεία κάθετα. Μπορείτε να το κάνετε αυτό με 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.

Σημείωση: Προσοχή για ενδεχόμενη buggy συμπεριφορά with flexbox in IE11.

Demo

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

Λίστες που Χωρίζονται-με-Κόμμα

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

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

Χρησιμοποιείστε την :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;
}

Demo

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

Χρήση SVG για Εικονίδια

Δεν υπάρχει λόγος να μην χρησιμοποιήσετε 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.

Demo

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

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

.calendar {
  table-layout: fixed;
}

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

Demo

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

Απέβαλλε τα Hacks των Περιθωρίων Με Flexbox

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

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

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

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

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

Χρήση Επιλογής Χαρακτηριστικών με Κένα Links

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

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

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

Demo

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

Δώσε στυλ στα “Προκαθορισμένα” Links

Προσθέστε στυλ στα “προκαθορισμένα” 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).

Demo

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

Εικόνες με Χαλασμένο Στυλ

Κάντε τις χαλασμένες εικόνες πιο αισθητικά όμορφες με λίγο 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:

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:

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

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

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

Demo

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

Ανάθεση font-size στα Στοιχεία της Φόρμας για Καλύτερη Εμπειρία από Κινητό

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

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

:dancer:

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

Χρήση Γεγονότων Δείκτη για Έλεγχο Γεγονότων του Ποντικιού

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

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

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

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

Ανάθεση display: none στο Τέλος των Γραμμών που Χρησιμοποιείται σαν Κενό

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

br + br {
  display: none;
}

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

Υποστήριξη

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

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