CSS μπορείτε να πάρετε ενθουσιασμένος περίπου το 2015
Το CSS είναι μια διαρκώς εξελισσόμενη γλώσσα, και καθώς ξεκινάει ο καινούργιος χρόνος, είναι πολύ ωραίο να ρίξουμε μια ματιά σε μερικά από τα αναδυόμενα χαρακτηριστικά που μπορούμε να αρχίσουμε να πειραματιστούμε.
Σε αυτό το άρθρο θα ρίξω μια ματιά σε μερικές νεότερες ενότητες και μεμονωμένες δυνατότητες CSS που κερδίζουν υποστήριξη προγράμματος περιήγησης. Δεν είναι όλα αυτά τα χαρακτηριστικά που θα μπορείτε να χρησιμοποιήσετε αμέσως στην παραγωγή, και κάποια είναι διαθέσιμα μόνο κάτω από τις πειραματικές σημαίες. Ωστόσο, θα βρείτε πολλά πράγματα εδώ που μπορείτε να αρχίσετε να παίζετε - ακόμα κι αν μόνο κατά τη διάρκεια ενός πρωτοτύπου στάδιο ανάπτυξης.
Επιλογείς CSS επιπέδου 4
Οι προδιαγραφές επιλογής επιπέδου 3 εφαρμόζονται καλά στα προγράμματα περιήγησης και μας έδωσαν χρήσιμους επιλογείς όπως nth-child. Επιλογείς Επίπεδο 4 μας φέρνει ακόμα περισσότερους τρόπους για να στοχεύσουμε το περιεχόμενο με το CSS.
Η ψευδο-τάξη άρνησης: όχι
Ο επιλογέας ψευδο-κατηγορίας άρνησης : δεν εμφανίζεται στο επίπεδο 3 αλλά παίρνει μια αναβάθμιση στο επίπεδο 4. Στο επίπεδο 3 μπορείτε να περάσετε έναν επιλογέα για να πείτε ότι δεν θέλετε το CSS να εφαρμοστεί σε αυτό το στοιχείο. Για να κάνετε όλο το κείμενο εκτός από κείμενο με μια κατηγορία intro με έντονη γραφή, θα μπορούσατε να χρησιμοποιήσετε τον ακόλουθο κανόνα.
p:not(.intro) { font-weight: normal; }Στο επίπεδο 4 της προδιαγραφής μπορείτε να περάσετε σε μια λίστα διαχωριστών με κόμματα επιλογής.
p:not(.intro, blockquote) { font-weight: normal; }Η σχετική ψευδο-τάξη: έχει
Αυτή η ψευδο-κλάση παίρνει μια λίστα επιλογών ως ένα όρισμα και θα ταιριάξει εάν οποιοσδήποτε από αυτούς τους επιλογείς θα ταιριάζει με ένα στοιχείο. Είναι ευκολότερο να δούμε με ένα παράδειγμα, σε αυτό το παράδειγμα οποιαδήποτε στοιχεία που περιέχουν μια εικόνα θα έχουν το μαύρο πλαίσιο που εφαρμόζεται:
a:has( > img ) { border: 1px solid #000; }Σε αυτό το δεύτερο παράδειγμα, συνδυάζω : έχει με : όχι και επιλέγοντας μόνο τα στοιχεία li που δεν περιέχουν στοιχείο παραγράφου:
li:not(:has(p)) { padding-bottom: 1em; }Οι αγώνες - κάθε ψευδο-τάξη: αγώνες
Αυτή η ψευδο-τάξη σημαίνει ότι μπορούμε να εφαρμόσουμε κανόνες σε ομάδες επιλογέων, για παράδειγμα:
p:matches(.alert, .error, .warn) { color: red; }Για να ελέγξετε το πρόγραμμα περιήγησης για υποστήριξη για αυτούς και άλλους προχωρημένους επιλογείς, μπορείτε να χρησιμοποιήσετε τη δοκιμή css4-selectors.com. Αυτός ο ιστότοπος είναι επίσης ένας εξαιρετικός πόρος για να μάθετε περισσότερα σχετικά με τους επερχόμενους επιλογείς.
CSS Blend Modes
Αν είστε εξοικειωμένοι με το Blend Modes στο Photoshop τότε μπορεί να σας ενδιαφέρει Σύνθεση και προδιαγραφή αναμείξεως. Αυτή η προδιαγραφή θα μας επιτρέψει να εφαρμόσουμε λειτουργίες μείξης σε φόντο και σε οποιοδήποτε στοιχείο HTML ακριβώς εκεί μέσα στο πρόγραμμα περιήγησης.
Στο ακόλουθο CSS έχω ένα πλαίσιο που περιέχει μια εικόνα φόντου. Με την προσθήκη ενός χρώματος φόντου και στη συνέχεια ρύθμιση του φόντου-μείγμα-mode για να αποχρωματίσει και να πολλαπλασιάσει μπορώ να εφαρμόσει ενδιαφέροντα εφέ στις εικόνες.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Χρησιμοποιώντας τη λειτουργία ανασύνδεσης φόντου
Η ιδιότητα λειτουργίας mix-blend-mode σας επιτρέπει να συνδυάσετε κείμενο πάνω από μια εικόνα. Στο παρακάτω παράδειγμα έχω ένα h1 στη συνέχεια στο .box2 που έχω ρυθμίσει σε λειτουργία mix-mode-mode: screen.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Χρησιμοποιώντας τη λειτουργία μείγμα-μείγμα
Οι λειτουργίες ανακατεύθυνσης CSS έχουν πραγματικά εκπληκτικά καλή υποστήριξη σε σύγχρονα προγράμματα περιήγησης εκτός του Internet Explorer, δείτε τον πίνακα υποστήριξης για ανασύνδεση φόντου , το mix-mode-mode είναι διαθέσιμο σε Safari και Firefox και πίσω από τη σημαία πειραματικών χαρακτηριστικών στην Opera και το Chrome. Με προσεκτική χρήση, αυτό είναι ακριβώς το είδος των προδιαγραφών που μπορείτε να αρχίσετε να παίζετε για να βελτιώσετε τα σχέδιά σας, αρκεί το fallback να μην αφήνει τα πράγματα δυσανάγνωστα σε μη υποστηρικτικά προγράμματα περιήγησης.
Εάν χρειάζεστε πληρέστερη υποστήριξη για παλαιότερα προγράμματα περιήγησης και έτσι δεν αισθάνεστε ότι οι τρόποι συνδυασμού μπορούν να χρησιμοποιηθούν στην παραγωγή ακόμα, μην ξεχνάτε ότι μπορείτε να τις χρησιμοποιήσετε κατά τη διάρκεια της ανάπτυξης για να αποφύγετε ταξίδια μέσω του Photoshop. Αφού ολοκληρώσετε τις εικόνες και τις θεραπείες, δημιουργήστε τις εικόνες παραγωγής σε ένα πρόγραμμα γραφικών, αντικαθιστώντας τα εφέ CSS.
Μάθετε περισσότερα σχετικά με τη χρήση των μεθόδων συνδυασμού με αυτό το πρακτικό άρθρο σχετικά με τα CSS Tricks , σε τους πόρους στον ιστότοπο της Adobe και στο Ιστοσελίδα του Dev Opera.
Η συνάρτηση calc ()
Η λειτουργία calc () είναι μέρος του Επίπεδο 3 μονάδων τιμών και μονάδων CSS. Αυτό σημαίνει ότι μπορείτε να κάνετε μαθηματικές λειτουργίες μέσα στο CSS.
Μια απλή χρήση του calc () μπορεί να βρεθεί εάν θέλετε να τοποθετήσετε μια εικόνα φόντου από το κάτω δεξιά μέρος ενός στοιχείου. Τοποθετώντας ένα στοιχείο 30px από το επάνω αριστερό μέρος είναι εύκολο, θα χρησιμοποιούσατε:
.box {background-image: url(check.png);background-position: 30px 30px;}Ωστόσο, δεν μπορείτε να το κάνετε από κάτω δεξιά, όταν δεν γνωρίζετε τις διαστάσεις του δοχείου. Οι λειτουργίες calc () σημαίνουν ότι μπορείτε να αφαιρέσετε τα 30 εικονοστοιχεία από 100% πλάτους ή ύψους:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Η υποστήριξη προγράμματος περιήγησης για το calc () είναι καλή σε όλα τα σύγχρονα προγράμματα περιήγησης, αν και Μπορώ να χρησιμοποιήσω αναφέρει ότι η χρήση του ως τιμή θέσης φόντου στο IE9 έχει ως αποτέλεσμα τη συντριβή του προγράμματος περιήγησης.
CSS Trickery και Calc Function είναι ένα διασκεδαστικό άρθρο σχετικά με τη χρήση calc () για την επίλυση ενός προβλήματος CSS. Υπάρχουν μερικές απλές περιπτώσεις χρήσης στο CSS Tricks.
Μεταβλητές CSS
Ένα ισχυρό χαρακτηριστικό των προ-επεξεργαστών CSS, όπως το Sass, είναι η δυνατότητα χρήσης μεταβλητών στο CSS. Σε ένα πολύ απλό επίπεδο, μπορούμε να εξοικονομήσουμε πολύ χρόνο, δηλώνοντας τα χρώματα και τις γραμματοσειρές που χρησιμοποιούνται στο σχεδιασμό μας, χρησιμοποιώντας μια μεταβλητή όταν χρησιμοποιούμε ένα συγκεκριμένο χρώμα ή γραμματοσειρά. Αν στη συνέχεια αποφασίσουμε να τροποποιήσουμε μια γραμματοσειρά ή την παλέτα χρωμάτων, χρειαζόμαστε μόνο να αλλάξουμε αυτές τις τιμές σε ένα μέρος.
Μεταβλητές CSS, που περιγράφονται στο Προσαρμοσμένες ιδιότητες CSS για διαδοχικές μεταβλητές επίπεδο 1, φέρνει αυτή τη λειτουργία στο CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Δυστυχώς υποστήριξη του προγράμματος περιήγησης για Μεταβλητές CSS περιορίζεται στον Firefox προς το παρόν.
Μπορείτε να δείτε περισσότερα παραδείγματα και να μάθετε περισσότερα στο αυτό το άρθρο στο Δίκτυο προγραμματιστών του Mozilla.
Εξαιρέσεις CSS
Όλοι γνωρίζουμε με πλωτήρες στο CSS. Το πιο απλό παράδειγμα μπορεί να είναι η μετακίνηση μιας εικόνας για να επιτρέπεται η ροή κειμένου γύρω από αυτήν. Ωστόσο, οι πλωτήρες είναι αρκετά περιορισμένοι καθώς το επιπλεύσιμο στοιχείο πάντα ανεβαίνει στην κορυφή, οπότε ενώ μπορούμε να πλέουμε μια εικόνα αριστερά και να τυλίξουμε το κείμενο προς τα δεξιά και κάτω από αυτό, δεν υπάρχει τρόπος να περάσουμε μια εικόνα στο μέσον του εγγράφου και το κείμενο ροής όλος ο τρόπος γύρω, ή τοποθετήστε το στο κάτω μέρος και αφήστε το κείμενο να κυλάει γύρω από την κορυφή και την πλευρά.
Εξαιρέσεις σας επιτρέπει να τυλίξετε το κείμενο γύρω από όλες τις πλευρές ενός τοποθετημένου αντικειμένου. Δεν ορίζει μια νέα μέθοδο τοποθέτησης, έτσι μπορεί να χρησιμοποιηθεί σε συνδυασμό με άλλες μεθόδους. Στο παρακάτω παράδειγμα τοποθετώ ένα στοιχείο πάνω από ένα μπλοκ κειμένου και στη συνέχεια δηλώνω ότι το στοιχείο ως αποκλεισμός με την περιτύλιξη περιουσιακών στοιχείων με τιμή και των δύο, έτσι ώστε το κείμενο σέβεται στη συνέχεια τη θέση του στοιχείου και τις ροές γύρω το.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Εξαιρέσεις στον Internet Explorer
Υποστήριξη του προγράμματος περιήγησης για αποκλεισμούς και περιτύλιγμα: οι δύο περιορίζονται επί του παρόντος στο IE10 +, απαιτώντας ένα πρόθεμα -ms. Έχετε υπόψη ότι οι Εξαιρέσεις συνδέονταν μέχρι πρόσφατα με την προδιαγραφή CSS Shapes, την οποία εξετάζω παρακάτω, έτσι ώστε ορισμένες από τις πληροφορίες στο διαδίκτυο να ενοποιήσουν τα δύο.
CSS Σχήματα
Η προδιαγραφή Εξαιρέσεις αφορά την περιτύλιξη κειμένου γύρω από ορθογώνια αντικείμενα. Τα σχήματα μας φέρνουν την πολύ ισχυρότερη δυνατότητα να τυλίγουμε το κείμενο γύρω από τα μη ορθογώνια αντικείμενα, όπως η ροή κειμένου γύρω από μια καμπύλη.
Επίπεδο 1 της προδιαγραφής CSS Shapes ορίζει ένα νέο σχήμα ιδιοκτησίας -έξω. Αυτή η ιδιότητα μπορεί να χρησιμοποιηθεί σε ένα επιπλωμένο στοιχείο. Στο παρακάτω παράδειγμα χρησιμοποιώ μορφή-έξω για να καμπυλωθεί κείμενο γύρω από μια εικόνα που έχει επιπλεύσει.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
Τα σχήματα CSS μας επιτρέπουν να καμπυλώνουμε το κείμενο γύρω από την εικόνα του μπαλονιού
Υποστήριξη προγράμματος περιήγησης για το σχήμα 1 περιλαμβάνει το Chrome και το Safari, πράγμα που σημαίνει ότι θα μπορούσατε να το χρησιμοποιήσετε σε φύλλα στυλ για συσκευές iOS. Το επίπεδο 2 της προδιαγραφής θα σας επιτρέψει να διαμορφώσετε το κείμενο μέσα στα στοιχεία με την ιδιότητα εσωτερικού σχήματος , οπότε θα πρέπει να προέλθουν περισσότερα από αυτό το χαρακτηριστικό.
Διαβάστε περισσότερα σχετικά με τα Σχήματα σε αυτό το άρθρο A List Apart από Σάρα Σουεϊντάν , και τους συνοδευτικούς πόρους.
Διάταξη πλέγματος CSS
Έχω αφήσει το αγαπημένο μου μέχρι το τελευταίο. Είμαι ένας μεγάλος οπαδός του αναδυόμενου spec Layout Grid από την πρώιμη υλοποίηση στον Internet Explorer 10. Το CSS Grid Layout μας δίνει έναν τρόπο να δημιουργήσουμε τις σωστές δομές πλέγματος με CSS και να τοποθετήσουμε το σχέδιό μας σε αυτό το πλέγμα.
Η διάταξη του πλέγματος μας δίνει μια μέθοδο δημιουργίας δομών που δεν ξεφεύγουν από τη χρήση πινάκων για διάταξη. Ωστόσο, περιγράφοντας το σε CSS και όχι σε HTML, μας επιτρέπουν να δημιουργούμε διατάξεις που μπορούν να επαναπροσδιοριστούν χρησιμοποιώντας ερωτήματα μέσων και να προσαρμοστούν σε διαφορετικά περιβάλλοντα. Μας επιτρέπει να διαχωρίζουμε σωστά τη σειρά των στοιχείων στην πηγή από την οπτική παρουσίασή τους. Ως σχεδιαστής αυτό σημαίνει ότι μπορείτε ελεύθερα να αλλάξετε τη θέση των στοιχείων της σελίδας όπως είναι καλύτερο για τη διάταξη σας σε διαφορετικά σημεία διακοπής και να μην χρειαστεί να υπονομεύσετε ένα λογικά δομημένο έγγραφο για το σχέδιο που ανταποκρίνεται στις ανάγκες σας. Αντίθετα με μια διάταξη με βάση τον πίνακα HTML, μπορείτε να τοποθετήσετε στοιχεία στρώματος στο πλέγμα. Επομένως, ένα στοιχείο μπορεί να αλληλεπικαλύπτεται με άλλο εάν απαιτείται.
Στο παρακάτω παράδειγμα δηλώνουμε ένα πλέγμα στο στοιχείο με μια κλάση .wrapper. Έχει τρεις κολώνες πλάτους 100 πίξελ με πύλες 10 px και τρεις σειρές. Τοποθετούμε τα πλαίσια μέσα στο δίκτυο χρησιμοποιώντας αριθμούς γραμμών πριν και μετά, πάνω και κάτω από την περιοχή όπου θέλουμε να εμφανίζεται το στοιχείο.
Grid Example ABCDEF
Το παράδειγμα πλέγματος στο Chrome
Υποστήριξη προγράμματος περιήγησης για το τελευταίο Grid Specification περιορίζεται στο Chrome με ενεργοποιημένη τη λειτουργία "πειραματικές λειτουργίες πλατφόρμας Web". Υπάρχει μια σταθερή εφαρμογή της αρχικής έκδοσης των προδιαγραφών στον Internet Explorer 10 και πάνω.
Μάθετε περισσότερα σχετικά με τη διάταξη πλέγματος στο δικό μου Πλέγμα με Παράδειγμα όπου μπορείτε να δείτε πολλά παραδείγματα πλέγματος που λειτουργούν στο Chrome, με ενεργοποιημένες τις πειραματικές λειτουργίες πλατφόρμας ιστού. Επίσης, μίλησα πέρυσι στο CSS Conf EU on Grid και μπορείτε να δείτε αυτό το βίντεο εδώ.
Έχετε μια αγαπημένη αναδυόμενη προδιαγραφή που δεν αναφέρεται εδώ;
Ελπίζω να απολαύσατε αυτή τη γρήγορη περιοδεία γύρω από μερικά από τα ενδιαφέροντα, νεότερα χαρακτηριστικά του CSS. Χρησιμοποιήστε τους συνδεδεμένους πόρους για να μάθετε περισσότερα σχετικά με τις δυνατότητες που έχετε βρει πιο ενδιαφέρουσες. Ενημερώστε με τα σχόλια εάν έχετε μια αγαπημένη επερχόμενη λειτουργία CSS που νομίζετε ότι πρέπει να γνωρίζουν οι άνθρωποι, ή επιπλέον μεγάλους πόρους και παραδείγματα για κάποια από τα χαρακτηριστικά που περιγράφω.
Προτεινόμενη εικόνα, χρησιμοποιεί εικόνα μπαλονιού μέσω Shutterstock.