Marquee στο CSS - Οδηγός για αρχάριους
Το Marquee παρουσιάστηκε για πρώτη φορά στον Internet Explorer και ήταν πολύ δημοφιλές στη δεκαετία του '90, πριν τελικά το W3C αποφάσισε να το αποκλείσει από το πρότυπο στοιχείο HTML λόγω προβλημάτων χρηστικότητας. Οι σχεδιαστές ιστοσελίδων ενθαρρύνθηκαν να μην χρησιμοποιήσουν την ετικέτα.
Παραδόξως, όμως, το marquee κάνει μια επιστροφή, όχι σε μια ετικέτα όπως σε έκανε, αλλά σε μια μονάδα CSS. Αυτή η ενότητα είναι διαθέσιμη ως μέρος της προδιαγραφής Webkit CSS και το W3C εργάζεται αυτήν την περίοδο σε παρόμοια ενότητα. Ωστόσο, δεδομένου ότι η έκδοση του W3C βρίσκεται ακόμα στο στάδιο της υποβολής υποψηφίων, δεν ισχύει ακόμη. Έτσι, αυτή τη στιγμή, θα καλύψουμε μόνο αυτό από την προδιαγραφή Webkit.
Η σύνταξη
Πρώτα απ 'όλα, η μαρκίζα μπορεί να οριστεί χρησιμοποιώντας την ακόλουθη συντομογραφία.
-webkit-marquee: [κατεύθυνση] [αύξηση] [επανάληψη] [στυλ] [ταχύτητα]
Κάθε μία από τις αξίες που απαιτούνται στη σύνταξη παραπάνω, πιστεύω, είναι αρκετά αυτονόητη, αλλιώς μπορείτε να τις βρείτε επαρκώς εξηγούμενες σε αυτή την τεκμηρίωση. Έτσι, αν θέλετε να σκάψετε βαθύτερα πώς λειτουργεί αυτή η σύνταξη, μπορείτε πάντα να ανατρέξετε στην τεκμηρίωση πρώτα.
Στη συνέχεια, έρχονται μαζί μας καθώς προχωράμε για να δημιουργήσουμε μερικά πραγματικά παραδείγματα και να δούμε πώς είναι σε δράση.
Παράδειγμα 1: Κύλιση του κειμένου
Εντάξει, στο πρώτο παράδειγμα θα δημιουργήσουμε την κλασική κίνηση της μάρκας που έχει το κείμενο να μετακινείται από δεξιά προς τα αριστερά.
Ας δημιουργήσουμε τη σήμανση κειμένου όπως παρακάτω:
Lollipop επικάλυψη λεμόνι σταγόνες jujubes applicake fruitcake ξινό γλυκά σουσάμι snaps.
Στη συνέχεια, ορίστε τη σήμανση με την ακόλουθη σύνταξη.
-webkit-marquee: Αυτόματη μέση άπειρη κύλιση κανονική? υπερχείλιση-χ: -webkit-marquee;
Όταν έχει ρυθμιστεί η κατεύθυνση της γραμμής αυτο, από προεπιλογή θα μετακινηθεί από τα δεξιά προς τα αριστερά. εναλλακτικά μπορείτε να αλλάξετε αυτήν την τιμή αριστερά. Επίσης παρατηρήστε ότι το υπερχείλιση-x πρέπει να οριστεί η ιδιότητα -webkit-marquee έτσι ώστε το περιεχόμενο να ενεργεί πάντα σαν ένα. Αν παραλείψετε αυτήν την ιδιότητα, το κείμενο δεν θα μετακινηθεί.
Δείτε τη δοκιμαστική έκδοση.
Παράδειγμα 2: Αναπήδηση εμπρός και πίσω
Στο δεύτερο παράδειγμα θα προσπαθήσουμε να δώσουμε διαφορετικό στυλ στη μαρκίζα. Αυτή τη φορά χρησιμοποιούμε εναλλακτικό αντί πάπυρος και αλλάξτε την τιμή κατεύθυνσης σε σωστά. Με αυτόν τον τρόπο, το marquee θα μετακινηθεί από τα αριστερά προς τα δεξιά και στη συνέχεια θα αναπηδήσει εμπρός και πίσω.
-webkit-marquee: αυτόματο μέσο άπειρο εναλλασσόμενο φυσιολογικό? υπερχείλιση-χ: -webkit-marquee;
Δείτε τη δοκιμαστική έκδοση
Παράδειγμα 3: Μετακίνηση προς τα πάνω
Και για το τελευταίο παράδειγμα, θα αλλάξουμε την κατεύθυνση της μαρκαρίσματος για να κινηθούμε προς τα πάνω. Υπάρχουν δύο κατεύθυνση αξίες να το πράξουν. μπορείτε να αλλάξετε την τιμή σε πάνω ή εμπρός.
Προσωπικά δεν καταλαβαίνω γιατί το Webkit παρείχε δύο αξίες που ουσιαστικά κάνουν το ίδιο πράγμα, καθώς νομίζω ότι θα μπορούσε να προκαλέσει σύγχυση σε μερικούς ανθρώπους.
-webkit-marquee: επάνω μεσαία άπειρη κύλιση κανονική? υπερχείλιση-χ: -webkit-marquee;
Δείτε τη δοκιμαστική έκδοση
Επιπλέον, έχω συντάξει μερικά ακόμη παραδείγματα, αλλά θα είναι συντριπτική αν εξηγηθούν όλα εδώ.
Αλλά, μπορείτε να δείτε όλα τα demo και να κατεβάσετε τις πηγές από τους παρακάτω συνδέσμους.
- Διαδήλωση
- Λήψη πηγής
Τελική σκέψη & Αναφορές
Ήμουν έκπληκτος για πρώτη φορά ότι εξακολουθεί να υπάρχει ενδιαφέρον για τη σκηνή, η οποία κατά τη γνώμη μου είχε φτάσει στο τέλος της. Αυτό με οδήγησε επίσης να αναρωτηθώ πώς μια ενότητα CSS όπως αυτή θα είναι χρήσιμη. Στην πραγματικότητα, κάθε πρόγραμμα περιήγησης εξακολουθεί να υποστηρίζει την κληρονομιά του ετικέτα.
Λοιπόν, τι νομίζεις? Είναι η σήμανση ακόμα σχετική σε αυτή την ηλικία και θα ήταν χρήσιμη στο σύγχρονο web design?
Εάν εξακολουθείτε να είστε περίεργοι για αυτό το περιπλανώμενο υλικό, μπορείτε να επισκεφθείτε μερικές από τις παρακάτω αναφορές:
- Αναφορά CSS του Safari
- Webkit γεννήτρια μαρκών
- Πλήρη τεκμηρίωση των παλαιών
ετικέτα από το Sitepoint. - Και υπάρχει πάντα μια γεννήτρια για σχεδόν τα πάντα, συμπεριλαμβανομένου αυτού του Generator Marquee.
