Η νέα σύνταξη εύρους ερωτημάτων μέσων CSS

Βασιζόμαστε σε Ερωτήματα μέσων CSS για την επιλογή και το styling στοιχείων με βάση μια στοχευμένη συνθήκη. Αυτή η συνθήκη μπορεί να είναι όλα τα είδη των πραγμάτων, αλλά συνήθως εμπίπτει σε δύο στρατόπεδα: (1) τον τύπο του μέσου που χρησιμοποιείται και (2) μια συγκεκριμένη λειτουργία του προγράμματος περιήγησης, της συσκευής ή ακόμα και του περιβάλλοντος του χρήστη.

Λοιπόν, ας πούμε ότι θέλουμε να εφαρμόσουμε συγκεκριμένο στυλ CSS σε ένα τυπωμένο έγγραφο:

@media print {
  .element {
    /* Style away! */
  }
}

Το γεγονός ότι μπορούμε να εφαρμόσουμε στυλ σε ένα συγκεκριμένο πλάτος θύρας προβολής έχει κάνει τα CSS Media Queries βασικό συστατικό του responsive web design από τον Ethan Marcotte εφάρμοσε τον όρο. Εάν το πλάτος της θύρας προβολής του προγράμματος περιήγησης είναι ένα συγκεκριμένο μέγεθος, τότε εφαρμόστε ένα σύνολο κανόνων στυλ, το οποίο μας επιτρέπει να σχεδιάσουμε στοιχεία που ανταποκρίνονται στο μέγεθος του προγράμματος περιήγησης.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Παρατηρήστε το and εκεί μέσα? Αυτός είναι ένας τελεστής που μας επιτρέπει να συνδυάζουμε εντολές. Σε αυτό το παράδειγμα, συνδυάσαμε μια συνθήκη σύμφωνα με την οποία ο τύπος μέσου είναι a screen και ότι είναι min-width η δυνατότητα έχει οριστεί σε 30em (ή από πάνω). Μπορούμε να κάνουμε το ίδιο πράγμα για να στοχεύσουμε μια σειρά μεγεθών θυρών προβολής:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Τώρα αυτά τα στυλ εφαρμόζονται σε ένα ρητό εύρος πλατών θυρών προβολής και όχι σε ένα μεμονωμένο πλάτος!

Ωστόσο, η προδιαγραφή Media Queries Level 4 έχει εισαγάγει μια νέα σύνταξη για τη στόχευση ενός εύρους πλάτη θυρών προβολής χρησιμοποιώντας κοινούς μαθηματικούς τελεστές σύγκρισης — πράγματα όπως <, >, να = — που έχουν περισσότερο νόημα συντακτικά ενώ γράφουν λιγότερο κώδικα.

Ας εξετάσουμε πώς λειτουργεί αυτό.

Νέοι τελεστές σύγκρισης

Αυτό το τελευταίο παράδειγμα είναι μια καλή απεικόνιση του τρόπου με τον οποίο έχουμε ένα είδος «πλαστών» σειρών συνδυάζοντας συνθήκες χρησιμοποιώντας το and χειριστής. Η μεγάλη αλλαγή στην προδιαγραφή Media Queries Level 4 είναι ότι έχουμε νέους τελεστές που συγκρίνουν τιμές αντί να τις συνδυάζουν:

• < αξιολογεί εάν μια τιμή είναι μικρότερη άλλη τιμή
• > αξιολογεί εάν μια τιμή είναι μεγαλύτερη από ό, τι άλλη τιμή
• = αξιολογεί εάν μια τιμή είναι ίσος σε άλλη τιμή
• <= αξιολογεί εάν μια τιμή είναι μικρότερο ή ίσο to άλλη τιμή
• >= αξιολογεί εάν μια τιμή είναι μεγαλύτερο ή ίσο to άλλη τιμή

Δείτε πώς μπορεί να έχουμε γράψει ένα ερώτημα πολυμέσων που εφαρμόζει στυλ, εάν το πρόγραμμα περιήγησης είναι 600px ευρύ ή μεγαλύτερο:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Δείτε πώς φαίνεται να γράψετε το ίδιο πράγμα χρησιμοποιώντας έναν τελεστή σύγκρισης:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Στόχευση εύρους πλάτη θυρών προβολής

Συχνά όταν γράφουμε ερωτήματα πολυμέσων CSS, δημιουργούμε αυτό που ονομάζεται α σημείο διακοπής — μια κατάσταση όπου το σχέδιο «σπάει» και εφαρμόζεται ένα σύνολο στυλ για να το διορθώσει. Ένα σχέδιο μπορεί να έχει ένα σωρό σημεία διακοπής! Και συνήθως βασίζονται στο ότι η θύρα προβολής βρίσκεται ανάμεσα σε δύο πλάτη: πού ξεκινά το σημείο διακοπής και πού τελειώνει το σημείο διακοπής.

Δείτε πώς το κάναμε αυτό χρησιμοποιώντας το and τελεστής για να συνδυάσει τις δύο τιμές σημείου διακοπής:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Αρχίζετε να καταλαβαίνετε πόσο πιο σύντομο και ευκολότερο είναι να γράψετε ένα ερώτημα πολυμέσων όταν αφαιρούμε το Boolean and τελεστής υπέρ της νέας σύνταξης σύγκρισης εύρους:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Πολύ πιο εύκολο, σωστά; Και είναι ξεκάθαρο τι ακριβώς κάνει αυτό το ερώτημα μέσων.

Υποστήριξη του προγράμματος περιήγησης

Αυτή η βελτιωμένη σύνταξη ερωτημάτων πολυμέσων βρίσκεται ακόμη στις πρώτες μέρες της κατά τη στιγμή της συγγραφής και δεν υποστηρίζεται τόσο ευρέως αυτήν τη στιγμή όσο η προσέγγιση που συνδυάζει min-width και max-width. Πλησιάζουμε όμως! Το σαφάρι είναι το μόνο σημαντικό κράτημα σε αυτό το σημείο, αλλά υπάρχει ανοιχτό εισιτήριο για αυτό που μπορείτε να ακολουθήσετε.

Ας δούμε ένα παράδειγμα

Ακολουθεί μια διάταξη που είναι κατάλληλη για μεγαλύτερες οθόνες, όπως μια επιφάνεια εργασίας:

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

Για να δείτε τι συμβαίνει, δείτε πώς ανταποκρίνεται η διάταξη μεταξύ των δύο μικρότερων σημείων διακοπής. Η κρυφή λίστα πλοήγησης εμφανίζεται επίσης title στο main αυξάνεται μέσα font-size.

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

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Συνδυάσαμε μερικές από τις έννοιες που καλύψαμε! Στοχεύουμε συσκευές με α screen τύπο μέσου, αξιολογώντας εάν το πλάτος της θύρας προβολής είναι μεγαλύτερο ή ίσο με μια συγκεκριμένη τιμή χρησιμοποιώντας τη σύνταξη εύρους νέων χαρακτηριστικών πολυμέσων και συνδυάζοντας τις δύο συνθήκες με το and χειριστής.

Εντάξει, άρα είναι εξαιρετικό για κινητές συσκευές παρακάτω 768px και για άλλες συσκευές ίσες ή μεγαλύτερες από 768px. Τι γίνεται όμως με αυτή τη διάταξη επιφάνειας εργασίας… πώς θα φτάσουμε εκεί;

Όσον αφορά τη διάταξη:

• Η main το στοιχείο γίνεται πλέγμα 12 στηλών.
• Στην εικόνα εμφανίζεται ένα κουμπί.
• Το μέγεθος του .title η γραμματοσειρά του στοιχείου αυξάνεται και επικαλύπτει την εικόνα.

Υποθέτοντας ότι έχουμε κάνει την εργασία μας και έχουμε καθορίσει ακριβώς πού πρέπει να πραγματοποιηθούν αυτές οι αλλαγές, μπορούμε να εφαρμόσουμε αυτά τα στυλ όταν η θύρα προβολής ταιριάζει με το width προϋπόθεση για αυτό το σημείο διακοπής. Θα πούμε ότι το σημείο διακοπής είναι στο 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Παίξτε μαζί του:

Γιατί η νέα σύνταξη είναι πιο κατανοητή

Η ουσία: είναι ευκολότερο να διακρίνεις έναν τελεστή σύγκρισης (π.χ width >= 320px) από ό, τι είναι για να πει τη διαφορά μεταξύ min-width και max-width χρησιμοποιώντας τα and χειριστής. Αφαιρώντας την απόχρωση μεταξύ min- και max-, έχουμε ένα single width παράμετρος για να δουλέψουμε και οι χειριστές μας λένε τα υπόλοιπα.

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

• max-width είναι ισοδύναμο με το <= χειριστή (π.χ (max-width: 320px) είναι το ίδιο με (width <= 320px)).
• min-width είναι ισοδύναμο με το >= χειριστή (π.χ (min-width: 320px) είναι το ίδιο με (width >= 320px)).

Παρατηρήστε ότι κανένα από τα δύο δεν είναι ισοδύναμο του > or < χειριστές.

Ας πάρουμε ένα παράδειγμα κατευθείαν από την προδιαγραφή Media Queries Level 4 όπου ορίζουμε διαφορετικά στυλ με βάση ένα σημείο διακοπής στο 320px στο πλάτος της θύρας προβολής χρησιμοποιώντας min-width και max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Και τα δύο ερωτήματα μέσων αντιστοιχούν σε μια συνθήκη όταν το πλάτος της θύρας προβολής είναι ίσο με 320px. Δεν είναι ακριβώς αυτό που θέλουμε. Θέλουμε είτε μία από αυτές τις συνθήκες και όχι και τις δύο ταυτόχρονα. Για να αποφύγουμε αυτές τις σιωπηρές αλλαγές, μπορεί να προσθέσουμε ένα pixel στο ερώτημα βάσει min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Ενώ αυτό διασφαλίζει ότι τα δύο σύνολα στυλ δεν εφαρμόζονται ταυτόχρονα όταν το πλάτος της θύρας προβολής είναι 320px, οποιοδήποτε πλάτος θύρας προβολής που βρίσκεται μεταξύ 320px και 321px θα έχει ως αποτέλεσμα μια εξαιρετικά μικρή ζώνη όπου δεν εφαρμόζεται κανένα από τα στυλ σε κανένα από τα ερωτήματα — μια περίεργη κατάσταση "φλας χωρίς στυλ περιεχομένου".

Μια λύση είναι να αυξηθεί η τιμή της δεύτερης κλίμακας σύγκρισης (αριθμοί μετά την υποδιαστολή) στο 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Αλλά αυτό γίνεται ανόητο και υπερβολικά περίπλοκο. Γι' αυτό η νέα σύνταξη εύρους δυνατοτήτων πολυμέσων είναι μια πιο κατάλληλη προσέγγιση:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Ολοκληρώνοντας

Ουφ, καλύψαμε πολλά σημεία σχετικά με τη νέα σύνταξη για τη στόχευση εύρους πλάτους θυρών προβολής στα ερωτήματα πολυμέσων CSS. Τώρα που η προδιαγραφή Media Queries Level 4 εισήγαγε τη σύνταξη και έχει υιοθετηθεί στα προγράμματα περιήγησης Firefox και Chromium, πλησιάζουμε στο να μπορούμε να χρησιμοποιήσουμε τους νέους τελεστές σύγκρισης και να τους συνδυάσουμε με άλλες δυνατότητες πολυμέσων εύρους εκτός από width, αρέσει height και aspect-ratio

Και αυτό είναι μόνο ένα από τα νεότερα χαρακτηριστικά που εισήγαγε η προδιαγραφή Level 4, μαζί με το α ένα σωρό ερωτήματα που μπορούμε να κάνουμε με βάση τις προτιμήσεις των χρηστών. Δεν τελειώνει εκεί! Ελέγξτε το Πλήρης οδηγός για ερωτήματα πολυμέσων CSS για μια κλεφτή ματιά τι μπορεί να συμπεριληφθεί στα ερωτήματα πολυμέσων Επίπεδο 5.