5 Ζεστά νέα χαρακτηριστικά CSS και πώς να τα χρησιμοποιήσετε

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

Για αυτό το σεμινάριο θα χρειαστείτε το Chrome 65+ ή το Firefox 59+. Ρίξτε μια ματιά στο που συνοδεύει το github repo για τον κωδικό βήμα προς βήμα. Θα αξιοποιούμε τα ακόλουθα χαρακτηριστικά για να δημιουργήσετε μια καλύτερη εμπειρία και να δουλέψετε γύρω από κάποια θέματα. Και αν σχεδιάζετε μαζί με μια ομάδα, χρησιμοποιήστε το καλύτερο αποθήκευση σύννεφων για να κρατήσει τα πράγματα συνεκτικά.

CSS Εμφάνιση μονάδας (Επίπεδο 3)

• Εμφάνιση: Περιεχόμενα.
• Κατάσταση του W3C - Σχέδιο εργασίας
• Υποστήριξη του προγράμματος περιήγησης

CSS υπό όρους Κανόνες Module (Επίπεδο 3)

• @υποστήριξη(...) {...}
• Κατάσταση του W3C - υποψήφια σύσταση
• Περαιτέρω ανάγνωση: MDN Web Docs

CSS Overscroll Module (Επίπεδο 1)

• Υπερπορική συμπεριφορά: περιέχει?
• Κατάσταση του W3C - ανεπίσημα
• Υποστήριξη του προγράμματος περιήγησης
• Περαιτέρω ανάγνωση: Πάρτε τον έλεγχο της κύλισης σας

CSS Ενότητα επιλογών (Επίπεδο 4)

• : Εστίαση - μέσα
• Κατάσταση του W3C - Σχέδιο εργασίας
• Υποστήριξη του προγράμματος περιήγησης
• Περαιτέρω ανάγνωση: MDN web docs : Εστίαση - μέσα , : σύμβολο κράτησης θέσης

Η μονάδα περιορισμού CSS (Επίπεδο 1)

• περιέχουν: βαφή.
• Κατάσταση του W3C - υποψήφια σύσταση
• Υποστήριξη του προγράμματος περιήγησης
• Περαιτέρω ανάγνωση: CSS Construment σε Chrome 52

01. Ρυθμίστε το HTML για το Newsfeed

Πρώτα πρέπει να δημιουργήσουμε κάποια εξαιρετικά απλή, επαναλαμβανόμενη σήμανση για το Newsfeed μας. Ας δημιουργήσουμε ένα .δοχείο div με μια μη συνδεδεμένη λίστα μέσα. Δώσ'το & lt; ul & gt; την τάξη του .ταίζω , στη συνέχεια, δημιουργήστε 10 λίστες-στοιχεία το καθένα που περιέχει ένα div με το .κάρτα Κατηγορία και κάρτα κειμένου 1, κάρτα 2 κλπ.

Τέλος, δημιουργήστε ένα άλλο Στοιχείο λίστας σε μεταξύ 5 και 6 με μια τάξη του . - Αυτό θα είναι χρήσιμο αργότερα - και να προσθέσετε ένα & lt; ul & gt; Μέσα με τρία στοιχεία λίστας χρησιμοποιώντας την κάρτα κειμένου Α, κάρτα Β κλπ.

 & lt; Body & GT;
 & lt; div class = "container" & gt;
 & lt; ul class = "feed" & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 3 & lt; / div & lt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; card 4 & lt; / div & gt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; card 5 & lt; / div & gt; / li & gt;
    & lt; li class = "ένθετο" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card b & lt; / lt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 7 & lt; / div & gt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; card 8 & lt; / div & gt; / li & gt;
 & lt; li & gt; & lt · div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; li & gt; & lt; div class = "κάρτα" & gt; / div & gt; / li & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / Body & GT; 

02. Στυλ το Newsfeed

Τώρα πρέπει να προσθέσουμε κάποια γρήγορη στυλ έτσι ώστε αυτό να αρχίσει να μοιάζει περισσότερο με ένα newsfeed. Πρώτα μπορούμε να δώσουμε & lt; body & gt; Ένα λεπτό χρώμα γκρι φόντο. Στη συνέχεια δώστε .δοχείο ένα μέγιστο πλάτος 800px και χρήση Περιθώριο: 0 Auto; να το ευθυγραμμιστεί.

Ας δώσουμε επίσης .κάρτα ένα λευκό φόντο, 10px του padding και το περιθώριο και τέλος ένα ύψος Από 300px - αυτό θα πρέπει να μας δώσει αρκετό να κάνουμε τη σελίδα κύλισης. Τέλος, θα πασπαλίζουμε κάποια μαγεία flexbox στο .ταίζω Για να φτιάξετε τα αντικείμενα ωραία, με δύο κάρτες ανά σειρά.

.
Εμφάνιση: Flex;
Flex-Wrap: Wrap;
}
.Eled li {
Flex: 1 0 50%.
} 

03. Προβλήματα διάταξης

Εάν μετακινηθείτε προς τα κάτω τη λίστα, θα παρατηρήσετε ότι οι κάρτες μας στην ένθετη λίστα, η κάρτα A - C, προκαλούν κάποια προβλήματα διάταξης. Ιδανικά, θα θέλαμε να ρέουν με τις υπόλοιπες κάρτες, αλλά όλοι κολλημένοι μαζί σε ένα μπλοκ. Ο λόγος για αυτό είναι ότι ένα δοχείο εύκαμπτου - το οποίο δημιουργείται χρησιμοποιώντας Εμφάνιση: Flex - κάνει μόνο τα άμεσα παιδιά της (δηλαδή τα στοιχεία της λίστας) σε αντικείμενα Flex.

Τώρα, συνήθως ο μόνος τρόπος για τον καθορισμό αυτό είναι να αλλάξετε το σήμα, αλλά ας προσποιούμαστε ότι δεν έχετε αυτή την πολυτέλεια. Ίσως το σήμα NewsFeed δημιουργείται από ένα σενάριο τρίτου μέρους ή τον κωδικό κληρονομιάς που προσπαθείτε μόνο να επαναλάβετε. Πώς μπορούμε να διορθώσουμε αυτό;

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

Επειδή προσποιούνται ότι δεν μπορούμε να αλλάξουμε το σήμα (μόνο για αυτό το βήμα) μπορούμε να είμαστε λίγο έξυπνοι γι 'αυτό και να κάνουμε το .κάρτα Στοιχεία τα αντικείμενα Flex και σχεδόν εξ ολοκλήρου αγνοούν τη σήμανση λίστας.

Καταργήστε πρώτα την υπάρχουσα .Feed li και στη συνέχεια να χρησιμοποιήσετε Εμφάνιση: Περιεχόμενα και για τους δύο & lt; ul & gt; και & lt; li & gt; στοιχεία:

 .Feed ul,
.Eled li {
Εμφάνιση: Περιεχόμενα.
} 

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

 .Card {
Flex: 1 0 40%.
} 

Ta-da! Οι κάρτες μας χρησιμοποιούν τώρα τα θαύματα του FlexBox σαν να μην υπάρχει η δομική τους μη συνδεδεμένη σήμανση λίστας.

Ως πλευρική σημείωση μπορεί να αναρωτιέστε γιατί το λυτρωμένος η τιμή έχει οριστεί στο 40%. Αυτό συμβαίνει επειδή το .κάρτα η τάξη έχει περιθώριο, το οποίο δεν περιλαμβάνεται στον υπολογισμό του πλάτους όπως θα περίμενε κανείς όταν χρησιμοποιείτε Κουτί-μέγεθος: Border-Box . Να δουλέψουμε γύρω από αυτό, απλά πρέπει να θέσουμε το λυτρωμένος Αρκετά υψηλή για να ενεργοποιήσετε το περιτύλιγμα στο απαραίτητο σημείο και το FlexBox θα γεμίσει αυτόματα το υπόλοιπο χώρο.

04. Εξερευνήστε τα ερωτήματα χαρακτηριστικών

Παρόλο Εμφάνιση: Περιεχόμενα Μήπως ακριβώς αυτό που χρειαζόμαστε, εξακολουθεί να είναι μόνο σε κατάσταση εργασίας με το W3C. Και στην υποστήριξη χρώμιο έφτασε μόνο στην έκδοση 65 που κυκλοφόρησε τον Μάρτιο του 2018. Απίστευτα ο Firefox είχε υποστηρίξει από τον Απρίλιο του 2015!

Εάν απενεργοποιήσετε το στυλ σε devtools, θα δείτε ότι οι αλλαγές μας έχουν κάνει ένα κομμάτι χάος με τη διάταξη όταν Εμφάνιση: Περιεχόμενα δεν εφαρμόζεται. Τι μπορούμε να κάνουμε γι 'αυτό; Ώρα για το επόμενο νέο χαρακτηριστικό μας - Ερωτήσεις χαρακτηριστικών.

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

 @Supports (Ένδειξη: Περιεχόμενα) {
.Feed ul,
.Eled li {
  Εμφάνιση: Περιεχόμενα.
}
.card {
  Flex: 1 0 40%.
}
} 

05. Χρησιμοποιήστε το 'όχι' για καθαρότερο αποτέλεσμα

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

Ωστόσο, μπορείτε να αποφασίσετε ότι επειδή η υποστήριξη για τα στοιχεία των χαρακτηριστικών είναι αρκετά καλή (αν αγνοήσετε το IE) θέλετε πραγματικά να χρησιμοποιήσετε το ερώτημα χαρακτηριστικών δεν χειριστής. Λειτουργεί ακριβώς όπως θα περίμενε κανείς, έτσι μπορούμε να εφαρμόσουμε ξανά το πρωτότυπο μας καλώδιο Ακίνητα προς τις λίστες-στοιχεία όταν Εμφάνιση: Περιεχόμενα δεν υποστηρίζεται:

 @Supports όχι (οθόνη: Περιεχόμενα) {
.Eled li {
  Flex: 1 0 50%.
}
} 

μεσα στην δεν το ερώτημα μπορούμε να προσθέσουμε μερικά στυλ έτσι ώστε το . Τα στοιχεία βασικά εφαρμόζουν ξανά αυτό που κληρονομήθηκε χρησιμοποιώντας τη χρήση Εμφάνιση: Περιεχόμενα .

 ζωοτροφές li.nosed {
Flex-Βάση: 100%.
}
.Παρακάτω li.Ned ul {
 Εμφάνιση: Flex;
 Flex-Wrap: Wrap;
} 

06. Λήψη ενός βήματος περαιτέρω

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

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

 @Supports (Ένδειξη: Flex) και (Ένδειξη: Περιεχόμενα) {
...
}
@Supports (οθόνη: flex) και (όχι (οθόνη: περιεχόμενα)) {
...
} 

Ως μπόνους μπορείτε επίσης να δοκιμάσετε για την υποστήριξη προσαρμοσμένων ιδιοτήτων όπως αυτή:

 @Supports (--Foo: πράσινο) {
...
} 

07. Προσθέστε ένα κουτί συνομιλίας

Τώρα έχουμε ένα όμορφο Newsfeed στη θέση του, ας προσθέσουμε ένα μικρό κουτί συνομιλίας που είναι σταθερό στο κάτω δεξί μέρος της οθόνης. Θα χρειαστούμε μια λίστα μηνυμάτων και ένα πεδίο κειμένου για να εισέλθει στο χρήστη του χρήστη. Προσθέστε αυτό το μπλοκ λίγο μετά το άνοιγμα & lt; body & gt; ετικέτα:

 & lt; div class = "chat" & gt;
 & lt; div class = "μηνύματα" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 1 & lt; / div & lt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 2 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 3 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 4 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 5 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 6 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 7 & lt; / div & lt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 8 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 9 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "μήνυμα" & gt; message 10 & lt; / div & gt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; τύπος εισόδου = "κείμενο" class = "είσοδος" & gt;
& lt; / div & gt; 

08. Στυλ το κουτί συνομιλίας

Ώρα να προσθέσετε γρήγορα κάποιο στυλ, ώστε να φαίνεται μισό αξιοπρεπή.

 .Chat {
 Ιστορικό: #FFF;
 σύνορα: 10px στερεό # 000;
 Κάτω: 0;
 Μέγεθος γραμματοσειράς: 10px;
 Θέση: Σταθερή.
 Δεξιά: 0;
 Πλάτος: 300px;
 Z-Δείκτης: 10;
}
. Messages {
 Στρίψτε το κάτω μέρος: 5px στερεό # 000;
 Overflow: Αυτόματη?
 Padding: 10px;
 Μέγιστο ύψος: 300px;
}
.Message {
 Ιστορικό: # 000;
 Ακτίνα συνοριακής ακτίνας: 5px;
 Χρώμα: #FFF;
 Περιθώριο: 0 20% 10px 0;
 Padding: 10px;
}
. Messages Li: το τελευταίο παιδί.
 Περιθώριο-κάτω: 0;
}
.Input {
 Σύνορα: Κανένα;
 Οθόνη: μπλοκ;
 Padding: 10px;
 Πλάτος: 100%.
} 

09. Μετακινήστε την αλυσίδα

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

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

Η βρώμικη λύση είναι να ορίσετε το & lt; body & gt; προς την Overflow: Κρυμμένο , αλλά υπάρχει μια ωραία, λαμπερή νέα ιδιοκτησία CSS που καθορίζει όλα αυτά και είναι ένα απλό μονόγραμμα. Πες γεια σε υπερπροσφορά-συμπεριφορά . Υπάρχουν τρεις πιθανές τιμές:

• αυτο - την προεπιλογή, η οποία επιτρέπει την αλυσίδα κύλισης
• περιέχω - Απενεργοποιεί την αλυσίδα κύλισης
• κανένας - Απενεργοποιεί την αλυσίδα κύλισης και άλλα αποτελέσματα υπερπροσφορά (π.χ. Rubblebanding)

Μπορούμε να χρησιμοποιήσουμε τη στενογραφία υπερπροσφορά-συμπεριφορά ή μπορούμε να στοχεύσουμε μια συγκεκριμένη κατεύθυνση με υπερπροσφορά-συμπεριφορά-x (ή -y ). Ας το προσθέσουμε στο δικό μας . τάξη:

.
...
overscroll-συμπεριφορά-y: περιέχει?
...} 

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

Αυτή η ιδιοκτησία είναι επίσης αρκετά εύχρηστη εάν θέλατε να εφαρμόσετε ένα χαρακτηριστικό pull-to-refresh στο PWA σας, πείτε να ανανεώσετε το Newsfeed. Ορισμένα προγράμματα περιήγησης, όπως το Chrome για το Android, προσθέτουν αυτόματα τη δική τους και μέχρι τώρα δεν υπήρξε εύκολος τρόπος να το απενεργοποιήσετε χωρίς να χρησιμοποιήσετε το JS για να ακυρώσετε συμβάντα χρησιμοποιώντας επιδόσεις που επηρεάζουν τις μη παθητικές χειριστές.

Τώρα πρέπει απλά να προσθέσετε Υπερπορική συμπεριφορά: Περιέχει στο στοιχείο που περιέχει το παράθυρο προβολής, πιθανώς & lt; body & gt; ή & lt; html & gt; .

Αξίζει να σημειωθεί ότι αυτή η ιδιοκτησία δεν είναι πρότυπο W3C, μάλλον πρόταση της κοινότητας του Web Enroubator Community Group (Wicg). Οι δημοφιλείς, σταθερές και ώριμες προτάσεις Wicg θεωρούνται για τη μετανάστευση σε μια ομάδα εργασίας του W3C σε μεταγενέστερο στάδιο.

10. Σύμπτυξη του κουτιού συνομιλίας όταν δεν χρησιμοποιείται

Αυτή τη στιγμή το κουτί συνομιλίας καταλαμβάνει αρκετά χώρο, το οποίο αν δεν είμαστε αλληλεπιδρούν με αυτό είναι λίγο αποσπούν την προσοχή. Ευτυχώς μπορούμε να κάνουμε κάτι γι 'αυτό με ένα μικρό css magic.

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

.
 ...
 Μέγιστο ύψος: 25px;
Μετάβαση: μέγιστο ύψος 500ms. } 

Επόμενη Σελίδα: Συνεχίστε να εξερευνήσετε τα νέα χαρακτηριστικά CSS στα βήματα 11-20

• 1
• 2

Τρέχουσα σελίδα: Εξερευνήστε 5 νέα χαρακτηριστικά CSS: Βήματα 01-10