7 Νέες δυνατότητες για να δημιουργήσετε έναν ανταποκρινόμενο ιστότοπο

Το σύγχρονο CSS αναλαμβάνει τον πλήρη έλεγχο του στυλ ιστοτόπου με τη βοήθεια του απαιτούμενου JavaScript. Σε αυτό το άρθρο, θα επισημάνουμε επτά νέες ενημερώσεις CSS για να απλοποιήσουμε το μέλλον του στυλ. Επιπλέον, εξετάζουμε την υποστήριξη του προγράμματος περιήγησης Chrome, Edge και Firefox. Τέλος, θα συζητήσουμε τα ζητήματα, τις λύσεις και σχεδόν όλα όσα θα χρειαστείτε για να ξεκινήσετε αμέσως.

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

1. Υποσύστημα CSS

Σε αντίθεση με την ικανότητα του CSS flexbox να κινείται μόνο προς μία κατεύθυνση, μπορείτε να ορίσετε και τις δύο διαστάσεις σε πλέγματα. Καθώς αρχίζουν να γίνονται ισχυρά και δημοφιλή τις επόμενες δεκαετίες, παρατηρούνται τεράστιες αλλαγές στα σχέδια ιστοσελίδων. Τα ένθετα πλέγματα χρησιμοποιούνται για να σχεδιάσουν πλέγματα μέσα στα πλέγματα. Όμως, ποια είναι τα σημαντικότερα μειονεκτήματα που προκάλεσαν έκκληση για υποδίκτυα CSS;

• Τα ένθετα πλέγματα μετά το επίπεδο 2 χρησιμοποιούσαν υπερχείλιση περιεχομένου εκτός του μεγαλύτερου πλέγματος που επηρέασε σε μεγάλο βαθμό την ανταπόκριση ενός ιστότοπου.
• Τα ένθετα πλέγματα λειτουργούσαν ως ανεξάρτητα στοιχεία μέσα στο μεγαλύτερο δοχείο πλέγματος. Δεν υπήρχε καθόλου αναφορά στο γονικό κοντέινερ για οποιαδήποτε αλλαγή.

Χωρίς υποπλέγματα:

Μετά από υποπλέγματα:

Δείτε πώς μπορείτε να εφαρμόσετε δευτερεύοντα πλέγματα:

. κοντέινερ {
πλάτος: 700px;
ύψος: 500px;
φόντο: rgb (214, 255, 139);
οθόνη: πλέγμα;
πλέγμα-πρότυπο-στήλες: 1fr 1fr 1fr 1fr;
πλέγμα-πρότυπο-σειρές: 1fr 1fr 1fr 1fr;
}
.container div {
φόντο: rgb (72, 170, 137);
σειρά πλέγματος: 2/3;
πλέγμα-στήλη: 2/5;
οθόνη: πλέγμα;
πλέγμα-πρότυπο-στήλες: υποπλέγμα;
πλέγμα-πρότυπο-σειρές: υποπλέγμα;
}

Μπορείτε να τοποθετήσετε πολλά δευτερεύοντα πλέγματα. Η αξιοσημείωτη εξαίρεση είναι ότι τα δευτερεύοντα πλέγματα κληρονομούν την ιδιότητα γονικού κενού δικτύου. Θα έχει ως αποτέλεσμα τη δημιουργία όλων των υποπλεγμάτων με τις ίδιες ιδιότητες κενού σε κάθε γονικό πλέγμα.

Το καλύτερο πράγμα για τα υπο-πλέγματα είναι ότι είναι εξαιρετικά ανταποκρινόμενα, ρυθμιζόμενα και επεκτάσιμα.

Συμβατότητα με το πρόγραμμα περιήγησης: Firefox

2. Ιδιότητα-αναλογία ιδιοκτησίας

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

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

Δείτε πώς μπορείτε να εφαρμόσετε την ιδιότητα αναλογίας διαστάσεων:

. κοντέινερ {
πλάτος: 700px;
λόγος διαστάσεων: 16/9;
φόντο: rgb (72, 170, 137);
}

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

Συμβατότητα προγράμματος περιήγησης: Chrome, Edge, Firefox (μερικό)

3. Flexbox Gap

Το χάσμα πλέγματος είναι αρκετά δημοφιλές για τη δημιουργία ίσου χώρου μεταξύ κάθε πλέγματος. Όμως, έπρεπε να εφαρμόσετε αρνητικά περιθώρια, ψευδο-επιλογείς κατηγορίας και σύνθετους επιλογείς για να χειριστείτε το διάστημα μεταξύ κάθε flex-item. Έτσι, το κενό Flexbox οδηγεί σε λιγότερες γραμμές κώδικα με μεγαλύτερη επεκτασιμότητα.

Δείτε πώς μπορείτε να εφαρμόσετε το κενό flexbox:

. κοντέινερ {
πλάτος: 700px;
ύψος: 500px;
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
κενό: 1em;
}

Παραγωγή:

Συμβατότητα προγράμματος περιήγησης: Όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Edge και Firefox.

Η κύλιση βοηθά στην κοινή χρήση περισσότερων πληροφοριών σχετικά με έναν μεμονωμένο ιστότοπο χωρίς ακαταστασία του αντιγράφου ιστού. Όμως, το κύριο μειονέκτημα της κύλισης είναι ότι μπορεί να σταματήσει στο μισό της παρα ή της εικόνας. Μερικές φορές, ο έλεγχος του σελιδοποιημένου περιεχομένου παραμένει στο μέσο. Το JavaScript χρησιμοποιείται προσεκτικά για να αποφευχθεί η προσαρμογή κύλισης. Όμως, δεν ήταν εντελώς ικανοποιητικό αποτέλεσμα μέχρι να έρθει το CSS Scroll Snap.

Χρησιμοποιώντας το Scroll Snap, μπορείτε να ορίσετε συγκεκριμένα όρια για να διορθώσετε τη διάταξη και την ορατότητα ενός δεδομένου κοντέινερ. Για παράδειγμα, λειτουργεί καταπληκτικά για τη δημιουργία καρουζέλ και συγκεκριμένων τμημάτων ιστότοπων. Σημειώστε ότι δεν θα χρειαστείτε JS για καμία προσαρμογή.

Δείτε πώς μπορείτε να εφαρμόσετε το snap snap:

. κοντέινερ {
πλάτος: 100%;
ύψος: 100%;
οθόνη: flex;
overflow-x: κύλιση;
scroll-snap-type: x υποχρεωτικό.
}
Ενότητα {
flex: κανένα;
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
μέγεθος γραμματοσειράς: 15em;
font-family: Arial, Helvetica, sans-serif;
κύλιση-snap-align: end;
πλάτος: 100%;
ύψος: 100%;
}

Παραγωγή:

Το CSS scroll snap έχει γονική και θυγατρική ιδιότητα. Η ιδιότητα γονέα ή κοντέινερ αποφασίζει την κατεύθυνση της κύλισης (x ή y) και τη συμπεριφορά του κουμπιού κύλισης. Για παράδειγμα, μπορείτε να ορίσετε scroll-snap-type: x υποχρεωτικό. Θα δώσει στον χρήστη έλεγχο για να αποφασίσει το σημείο κύλισης χωρίς να λάβει υπόψη τη θέση κύλισης.

Από την άλλη πλευρά, το scroll-snap-type: y proximity λειτουργεί μόνο όταν ο επισκέπτης του ιστότοπου είναι πιο κοντά στο σημείο κύλισης.

Η θυγατρική ιδιότητα είναι scroll-snap-align για να ευθυγραμμίσει τα στοιχεία κατά τη διάρκεια του CSS scroll snap. Εισάγει τιμές έναρξης, τέλους και κεντρικού για την ευθυγράμμιση των στοιχείων ανάλογα.

5. Ερωτήματα δυνατοτήτων

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

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

Δείτε πώς μπορείτε να εφαρμόσετε ερωτήματα λειτουργιών:

@supports (περιεχόμενο-ορατότητα: αυτόματη) {
σώμα{
φόντο: κιρκίρι;
πλάτος: 100%;
ύψος: 100%;
}
}

Επομένως, μόνο τα προγράμματα περιήγησης που αποδίδουν ιδιότητες ορατότητας περιεχομένου θα έχουν χρώμα φόντου. Διαφορετικά, θα ληφθεί υπόψη η προεπιλεγμένη τιμή. Λάβετε υπόψη ότι το @ είναι παρόμοιο με το @media των ερωτημάτων πολυμέσων, όπου έπρεπε να ορίσετε ένα μέγιστο ή ελάχιστο πλάτος σε προσωρινές προσαρμογές. Απλοποιεί την απομνημόνευση των ερωτημάτων λειτουργιών @supports.

Διαβάστε περισσότερα: Πώς να χρησιμοποιήσετε ερωτήματα πολυμέσων σε HTML και CSS

Συμβατότητα προγράμματος περιήγησης: Όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Edge και Firefox.

6. Περιεχόμενο-ορατότητα

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

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

# κύριο {
περιεχόμενο-ορατότητα: αυτόματη;
/ * περιέχει-εγγενές μέγεθος: 0 500px; */
}

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

Ας μετρήσουμε τη δύναμη της ορατότητας περιεχομένου. Εδώ είναι το αποτέλεσμα:

7. Μετάβαση, μετασχηματισμός και ζωτικότητα

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

Τα κινούμενα σχέδια χρησιμοποιούνται με @keyframes που ορίζουν στυλ σε πολλά σημεία κατά τη διάρκεια της κινούμενης εικόνας. Το ενδιαφέρον είναι ότι Το @keyframes καθορίζει πότε θα πραγματοποιηθεί η αλλαγή, ο μετασχηματισμός και η κινούμενη εικόνα αναλαμβάνουν τον έλεγχο της αλλαγής και η μετάβαση φροντίζει για το πώς θα συμβεί η αλλαγή (π.χ. εφέ αιωρήματος).

. παιδί {
φόντο: κιρκίρι;
ύψος: 150px;
πλάτος: 150 εικονοστοιχεία;
άσπρο χρώμα;
μετάβαση: μετατρέψτε 0,2s ευκολία-έξω-έξω
animation: myAnimation 2s άπειρη.
}
. παιδί: αιωρηθείτε {
μετασχηματισμός: κλίμακα (2, 2) περιστροφή (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
μετασχηματισμός: translateX (400px)
}
100% {
μετασχηματισμός: translateX (0px)
}
}

Συμβατότητα προγράμματος περιήγησης: Όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Edge και Firefox.

Τυλίγοντας

Η διαδοχική σήμανση φύλλου στυλ εξελίσσεται συνεχώς με καλύτερες δυνατότητες. Μέχρι στιγμής, έχετε γνωρίσει αυτά τα επτά καταπληκτικά χαρακτηριστικά που περιλαμβάνουν το δευτερεύον δίκτυο CSS, την ιδιότητα αναλογίας διαστάσεων, κενά flexbox, snap scroll, ερωτήματα χαρακτηριστικών, ιδιότητα ορατότητας περιεχομένου, μετάβαση, μετασχηματισμός και κινουμένων σχεδίων.

Στο τέλος της ημέρας, πρέπει να διασφαλίσετε ποιες λειτουργίες απλοποιούν το στυλ του ιστότοπού σας.

7 Νέες δυνατότητες που πρέπει να προσέξετε στο Bootstrap 5

Εάν αναπτύσσετε ιστότοπους και εφαρμογές χρησιμοποιώντας το πλαίσιο Bootstrap CSS, δείτε τι νέο υπάρχει στο Bootstrap 5.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα