Στυλ κράτησης θέσης css. Προσθήκη στυλ CSS στο σύμβολο κράτησης θέσης

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

Πού είναι το σύμβολο κράτησης θέσης;

Το πρόβλημα είναι ότι η υπόδειξη πεδίου εισαγωγής είναι κρυμμένη με ασφάλεια στο σκιερό DOM και δεν είναι τόσο εύκολο να φτάσετε. Για αυτό, χρησιμοποιείται ένα ειδικό μη τυπικό ψευδοστοιχείο CSS::placeholder. Με αυτό, μπορείτε να ελέγξετε τις ιδιότητες της επεξήγησης εργαλείου.

Θα σας ενδιαφέρει:

Το στυλ του placeholder στο CSS μοιάζει με αυτό:

input::placeholder ( χρώμα: κόκκινο; αδιαφάνεια: 1; στυλ γραμματοσειράς: πλάγια γραφή; )

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

Ο χειρισμός του ψευδοστοιχείου κράτησης θέσης CSS γίνεται καλά από όλους σύγχρονα προγράμματα περιήγησηςκαι για να υποστηρίξετε παλαιότερα προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε προθέματα:

::-webkit-input-placeholder - για προγράμματα περιήγησης webkit (Safari, Chrome, Opera).
::-moz-placeholder - για Προγράμματα περιήγησης Firefoxπαραπάνω έκδοση 19?
:-moz-placeholder - για παλιό Firefox.
:-ms-input-placeholder - για Internet Explorerπαραπάνω έκδοση 10.

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

Επιλογές styling

Για το ψευδοστοιχείο κράτησης θέσης στο CSS, μπορείτε να ορίσετε τις ακόλουθες παραμέτρους:

φόντο - μια ομάδα ιδιοτήτων φόντου. Το φόντο του μπλοκ υποδείξεων εκτείνεται σε ολόκληρο το πεδίο εισαγωγής. Μπορείτε να ορίσετε όχι μόνο το χρώμα (χρώμα φόντου), αλλά και την εικόνα (φόντο-εικόνα).
χρώμα κειμένου - χρώμα?
διαφάνεια - αδιαφάνεια.
υπογράμμιση, υπεργράμμιση ή διαγράμμιση - διακόσμηση κειμένου.
εγγραφή - μετατροπή κειμένου.
padding - padding. Δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης. Όπως και με τα inline στοιχεία, η επάνω και η κάτω επένδυση αγνοούνται.
εμφάνιση γραμματοσειρών - ιδιότητες της ομάδας γραμματοσειρών, ύψος γραμμής και διάφορες εσοχές (εσοχή κειμένου, διάστιχο, διάστιχο λέξεων).
κατακόρυφη ευθυγράμμιση στη γραμμή - κατακόρυφη ευθυγράμμιση.
αποκοπή κειμένου όταν υπερχειλίζει το κοντέινερ - υπερχείλιση κειμένου.

Input1::placeholder ( φόντο-εικόνα: linear-gradient(lime, μπλε); χρώμα: λευκό; ) .input2::placeholder ( κείμενο-διακόσμηση: γραμμή-μέχρι; χρώμα: μωβ; γραμματοσειρά-βάρος: έντονη; ) .input3 ::placeholder (μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, διάστιχο: 10 εικονοστοιχεία; ) .input4::placeholder ( φόντο: καφέ; χρώμα: λευκό; υπερχείλιση κειμένου: έλλειψη; )

Στο επίκεντρο

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

input:focus::placeholder (χρώμα: διαφανές; )

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

input::placeholder ( χρώμα: μαύρο; μετάβαση: χρώμα 1s; ) input:focus::placeholder (χρώμα: λευκό; )

Στο πρόγραμμα περιήγησης Google Chromeτο χρώμα της υπόδειξης όταν εστιάσετε σε ένα τέτοιο πεδίο θα αλλάξει ομαλά μέσα σε ένα δευτερόλεπτο.

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

Αλλαγή χρώματος κειμένου κράτησης θέσης

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

HTML

Το κείμενο του σύμβολο κράτησης θέσης εισαγωγής (και περιοχής κειμένου) έχει ως προεπιλογή ένα ανοιχτό γκρι χρώμα, ωστόσο, μπορούμε να το αλλάξουμε με μερικές γραμμές CSS. Εδώ θα χρωματίσουμε το κείμενο εισαγωγής κόκκινο χρησιμοποιώντας ένα όνομα χρώματος HTML, αλλά οποιαδήποτε μέθοδος χρώματος θα είναι αρκετή (HEX, RGB, HSL).

css

::-webkit-input-placeholder ( /* Chrome */ χρώμα: κόκκινο; ) :-ms-input-placeholder ( /* IE 10+ */ χρώμα: κόκκινο; ) ::-moz-placeholder ( /* Firefox 19 + */ χρώμα: κόκκινο; αδιαφάνεια: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ χρώμα: κόκκινο; αδιαφάνεια: 1; )

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

Αλλαγή χρώματος κειμένου εστίασης κράτησης θέσης

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

css

input ( περίγραμμα: κανένα; padding: 12px; border-radius: 3px; border: 1px solid black; ) ::-webkit-input-placeholder ( /* Chrome */ χρώμα: κόκκινο; μετάβαση: αδιαφάνεια 250ms ευκολία εισόδου ; ) :focus::-webkit-input-placeholder ( αδιαφάνεια: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ χρώμα: κόκκινο; μετάβαση: αδιαφάνεια 250 ms ease-in-out; ) :focus :-ms-input-placeholder ( αδιαφάνεια: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ χρώμα: κόκκινο; αδιαφάνεια: 1; μετάβαση: αδιαφάνεια 250 ms ease-in-out; ) :focus:: -moz-placeholder ( αδιαφάνεια: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ χρώμα: κόκκινο; αδιαφάνεια: 1; μετάβαση: αδιαφάνεια 250ms ease-in-out; ) :focus:-moz-placeholder (αδιαφάνεια: 0,5; )

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

Πού είναι το σύμβολο κράτησης θέσης;

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

Το στυλ του placeholder στο CSS μοιάζει με αυτό:

Εισαγωγή::placeholder ( χρώμα: κόκκινο, αδιαφάνεια: 1, στυλ γραμματοσειράς: πλάγια γραφή, )

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

Το ψευδοστοιχείο κράτησης θέσης CSS αντιμετωπίζεται καλά από όλα τα σύγχρονα προγράμματα περιήγησης και τα προθέματα μπορούν να χρησιμοποιηθούν για την υποστήριξη παλαιότερων προγραμμάτων περιήγησης:

::-webkit-input-placeholder - για προγράμματα περιήγησης webkit (Safari, Chrome, Opera).
::-moz-placeholder - για προγράμματα περιήγησης Firefox πάνω από την έκδοση 19.
:-moz-placeholder - για παλιό Firefox.
:-ms-input-placeholder - για τον Internet Explorer πάνω από την έκδοση 10.

Επιλογές styling

Μπορείτε να ορίσετε τις ακόλουθες επιλογές για το ψευδοστοιχείο κράτησης θέσης στο CSS:

φόντο - η ομάδα μπλοκ υπόδειξης ισχύει για ολόκληρο το πεδίο εισαγωγής. Μπορείτε να ορίσετε όχι μόνο το χρώμα (χρώμα φόντου), αλλά και την εικόνα (φόντο-εικόνα).
χρώμα κειμένου - χρώμα?
διαφάνεια - αδιαφάνεια.
υπογράμμιση, υπεργράμμιση ή διαγράμμιση - διακόσμηση κειμένου.
εγγραφή - μετατροπή κειμένου.
padding - padding. Δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης. Όπως και με τα inline στοιχεία, η επάνω και η κάτω επένδυση αγνοούνται.
εμφάνιση γραμματοσειρών - ιδιότητες της ομάδας γραμματοσειρών, ύψος γραμμής και διάφορες εσοχές (εσοχή κειμένου, διάστιχο, διάστιχο λέξεων).
κατακόρυφη ευθυγράμμιση στη γραμμή - κατακόρυφη ευθυγράμμιση.
αποκοπή κειμένου όταν υπερχειλίζει το κοντέινερ - υπερχείλιση κειμένου.

.input1::placeholder ( φόντο-εικόνα: γραμμική κλίση (lime, μπλε); χρώμα: λευκό; ) .input2::placeholder ( κείμενο-διακόσμηση: γραμμή-μετά; χρώμα: μωβ; γραμματοσειρά-βάρος: έντονη; ) . input3::placeholder (μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, διάστιχο: 10 εικονοστοιχεία; ) .input4::placeholder ( φόντο: καφέ; χρώμα: λευκό; υπερχείλιση κειμένου: έλλειψη; )

Στο επίκεντρο

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

Είσοδος: εστίαση:: κράτημα θέσης ( χρώμα: διαφανές; )

Είσοδος::placeholder ( χρώμα: μαύρο; μετάβαση: χρώμα 1s; ) input:focus::placeholder (χρώμα: λευκό; )

ΣΤΟ Google πρόγραμμα περιήγησηςΤο χρώμα συμβουλής εργαλείου Chrome όταν εστιάσετε σε ένα τέτοιο πεδίο θα αλλάξει ομαλά μέσα σε ένα δευτερόλεπτο.

Το χαρακτηριστικό placeholder χρησιμοποιείται για τη δημιουργία συμβουλών εργαλείων μέσα σε κενά πεδία εισαγωγής (ετικέτες και ). Σε αυτό το άρθρο, θα εξετάσω τρόπους για να διαμορφώσετε τα σύμβολα κράτησης θέσης, καθώς και πώς να τα κάνετε πιο εύχρηστα.</p> <p>Ας ξεκινήσουμε με ένα παράδειγμα για όσους δεν γνωρίζουν ακόμα τι είναι το σύμβολο κράτησης θέσης και πώς να το χρησιμοποιούν:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>Κατά την ανάπτυξη διεπαφών, θα πρέπει να λάβετε υπόψη τη συμπεριφορά των placeholders. Το κείμενο κράτησης θέσης εξαφανίζεται μόλις ξεκινήσει η πληκτρολόγηση. Γι' αυτό δεν πρέπει να τα χρησιμοποιείτε για να μεταφέρετε πληροφορίες σχετικά με το ίδιο το πεδίο εισαγωγής (πόσες και τι χαρακτήρες πρέπει να περιέχει). Για αυτούς τους σκοπούς, είναι καλύτερο να χρησιμοποιήσετε την ετικέτα <label>ή μια παράγραφο με μια μικρή υπόδειξη. Μπορείτε να διαβάσετε περισσότερα σχετικά με τις δυνατότητες χρήσης των placeholders.</p> <h2>Λογοτεχνική συμμόρφωση</h2> <p>Οι ακόλουθοι κανόνες χρησιμοποιούνται για το στυλ των συμβόλων κράτησης θέσης:</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( χρώμα : μπλε ; ) <p>Φαίνεται τρομερό, έτσι δεν είναι; Και υπάρχει λόγος για αυτό - μέχρι τώρα, οι κανόνες CSS για τα κράτη μέλη δεν έχουν τυποποιηθεί και η εφαρμογή σε κάθε πρόγραμμα περιήγησης είναι διαφορετική. Μπορείτε να μάθετε περισσότερα για όλα τα απαραίτητα προθέματα στο caniuse.</p> <p>Εάν χρησιμοποιείτε προεπεξεργαστή CSS, πιθανότατα θα βρείτε ότι είναι καλύτερο να γράψετε μια απλή μίξη σε σύμβολα κράτησης θέσης στυλ. Παράδειγμα στο Sass:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @content ;)) <p>Ανάλογα με το περιβάλλον, το mixin μπορεί να χρησιμοποιηθεί για την εφαρμογή στυλ καθολικά ή σε μεμονωμένα στοιχεία (δοκιμάστε το στο SassMeister):</p> <span>// Καθολικά για κάθε πεδίο εισαγωγής</span>@include placeholder ( χρώμα : μπλε ; ) <span>// Για ορισμένα πεδία εισαγωγής</span>.input ( @include placeholder ( χρώμα : πράσινο ; ) ) <h4>Παράδειγμα</h4> <p>Μπλε κείμενο για το σύμβολο κράτησης θέσης (μην το κάνετε ποτέ):</p>.blue-text ::-webkit-input-placeholder ( color : #2e8ece ; ) .blue-text :-moz-placeholder ( color : #2e8ece ;) ; ) .blue-text :-ms-input-placeholder ( color : #2e8ece ;) <p> <input type="text" placeholder="Ξεκινήστε να πληκτρολογείτε εδώ" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Υποστηριζόμενες ιδιότητες</h2> <p>Δεν μπορεί να χρησιμοποιηθεί κάθε ιδιοκτησία CSS με σύμβολα κράτησης θέσης. Εδώ <a href="https://realbazar.ru/el/updates-and-firmware/udalit-nepravilno-ustanovlennuyu-programmu-kak-udalit-programmu-s/">πλήρης λίστα</a>υποστηριζόμενες ιδιότητες:</p> <ul><li>γραμματοσειρά και όλες τις σχετικές ιδιότητες (μέγεθος γραμματοσειράς, γραμματοσειρά-οικογένεια κ.λπ.)</li> <li>φόντο και όλες τις σχετικές ιδιότητες (χρώμα φόντου, εικόνα φόντου, κ.λπ.)</li> <li>αδιαφάνεια</li> <li>εσοχή κειμένου</li> <li>υπερχείλιση κειμένου</li> <li>χρώμα</li> <li>κείμενο-μετασχηματισμός</li> <li>ύψος γραμμής</li> <li>διάστιχο λέξεων</li> <li>διάστιχο γραμμάτων</li> <li>κείμενο-διακόσμηση</li> <li>κατακόρυφη ευθυγράμμιση</li> </ul><h2>Κινούμενα σχέδια</h2> <p>Οι ιδέες για κινούμενα σχέδια ανήκουν στο ιστολόγιο html5.by.</p> <p>Όλα τα ακόλουθα παραδείγματα έχουν γραφτεί χρησιμοποιώντας τον προεπεξεργαστή Sass. Κάθε ένα συνοδεύεται από έναν σύνδεσμο προς το SassMeister όπου μπορείτε να βρείτε τον μεταγλωττισμένο κώδικα CSS.</p> <p>Πιθανότατα θα θέλετε να εφαρμόσετε κινούμενα σχέδια σε σύμβολα κράτησης θέσης όταν η εστίαση είναι σε ένα πεδίο εισαγωγής. Όλα αυτά γίνονται πολύ απλά. Αρκεί μόνο να χρησιμοποιήσετε τη μίξη κράτησης θέσης που γράφτηκε προηγουμένως μερικές φορές:</p>.input( @include placeholder( <span>// Στυλ για την κανονική κατάσταση</span>) & :focus ( @include placeholder ( <span>// Στυλ μετά το συμβάν εστίασης</span> } } } <h3>Αλλαγή διαφάνειας</h3>.input ( @include placeholder ( χρώμα : #aaa ; αδιαφάνεια : 1 ; μετάβαση : αδιαφάνεια 300ms ; ) & :focus ( @include placeholder ( αδιαφάνεια : 0 ; ) ) ) <p> <input type="text" placeholder="Επίδειξη: αλλαγή διαφάνειας" class="demo-css-placeholders-input pl-opacity"></p> <h3>Μετατόπιση δεξιά και αριστερά</h3> <p>Όσο μεγαλύτερο είναι το πλάτος του πεδίου εισαγωγής, τόσο μεγαλύτερη θα πρέπει να είναι η τιμή της ιδιότητας εσοχή κειμένου. Για ένα τυπικό πεδίο εισαγωγής, 500 px θα είναι αρκετά, για ευρύτερα, θα πρέπει να επιλέξετε χειροκίνητα. Το πλάτος του πεδίου εισαγωγής και η τιμή εσοχής κειμένου καθορίζουν την ταχύτητα της κίνησης. Για να μετακινηθείτε προς τα αριστερά, πρέπει να χρησιμοποιήσετε αρνητικές τιμές, για παράδειγμα -500px .</p><p> <input type="text" placeholder="Επίδειξη: μετατόπιση προς τα δεξιά" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Επίδειξη: μετατόπιση αριστερά" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Κατεβάζω ταχύτητα</h3> <p>Όπως και στο προηγούμενο παράδειγμα, η κίνηση εξαρτάται από το μέγεθος της εισόδου, αλλά σε αυτήν την περίπτωση, προσέξτε το ύψος. Για τη συντριπτική πλειοψηφία των πεδίων εισαγωγής, η επιθυμητή τιμή ύψους γραμμής θα είναι εντός 100 εικονοστοιχείων . Δυστυχώς, χρησιμοποιώντας την ιδιότητα line-height, είναι αδύνατο να εφαρμοστεί το αποτέλεσμα της μετακίνησης προς τα πάνω, καθώς η ιδιότητα δεν δέχεται αρνητικές τιμές.</p>.input ( @include placeholder (text-indent : 0px ; transition : text-indent 300ms ; ) & :focus ( @include placeholder (text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Επίδειξη: μετατόπιση προς τα κάτω" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Μαζί</h3> <p>Για να είναι ωραία και βολική η χρήση του κώδικα κινούμενων εικόνων για σύμβολα κράτησης θέσης, μπορείτε να γράψετε μια μικρή βιβλιοθήκη μίξεων για οποιονδήποτε προεπεξεργαστή. Η βιβλιοθήκη μοιάζει με αυτό ():</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) ( @include placeholder ( text-indent : 0 ; transition : text-indent $duration ; ) & :focus ( @include placeholder ( text-indent : if ($side == αριστερά , - $position , $position ); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200ms ) ( @include placeholder ( line-height : 1 ; transition : line-height $duration ; ) & :focus ( @include placeholder ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include placeholder ( αδιαφάνεια : 1 ; μετάβαση : αδιαφάνεια $duration ; ) & :focus ( @include placeholder ( αδιαφάνεια : 0 ; ) ) ) <p>Είναι πολύ εύκολο στη χρήση. Αρκεί να συνδέσετε την επιθυμητή μίξη σε οποιοδήποτε πεδίο εισόδου ή απλώς να δημιουργήσετε έναν καθολικό κανόνα για όλους τους ρυθμιστές βηματοδότησης στη σελίδα:</p> <span>// Για μεμονωμένα στοιχεία</span>.pl-shift-right ( @include pl-shift ( δεξιά ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// Για όλα τα άλλα</span>@include pl-shift (αριστερά); <h2>Αυτόματο πρόθεμα</h2> <p>Εάν δεν χρησιμοποιείτε προεπεξεργαστή και εξακολουθείτε να μην θέλετε το αρχείο προέλευσης CSS να μετατραπεί σε ένα χάος από προθέματα για όλα τα πιθανά προγράμματα περιήγησης, τότε ρίξτε μια ματιά στο Autoprefixer . Με αυτό, το καθαρό CSS μπορεί να λερωθεί (αλλά σε διαφορετικό αρχείο) προσθέτοντας όλα τα απαραίτητα προθέματα σε όλες τις ιδιότητες. Για να λειτουργήσει το πρόσθετο με ρυθμιστές βηματοδότησης, αρκεί να χρησιμοποιήσετε ψευδο-στοιχείο::placeholder:</p>:: placeholder ( χρώμα : πορτοκαλί ; ) . εισαγωγή : : σύμβολο κράτησης θέσης ( χρώμα : μπλε ; ) <p>Αφού αναλύσει τα στυλ σας, το Autoprefixer θα δημιουργήσει ένα ξεχωριστό αρχείο CSS στο οποίο θα γράψει όλα τα απαραίτητα προθέματα για όλα τα προγράμματα περιήγησης που καθορίσατε.</p> <h2>Τι έπεται</h2> <p>Όπως έγραψα παραπάνω, όλα όσα σχετίζονται με την εφαρμογή στυλ σε σύμβολα κράτησης θέσης δεν έχουν ακόμη τυποποιηθεί. Θα διορθωθεί σύντομα. Μια ψευδο-κλάση προστέθηκε στην προδιαγραφή Επιλογέα επιπέδου 4: placeholder-shown , η οποία θα φέρει επιτέλους στο πρότυπο όλο αυτό το τρελό μείγμα ψευδο-κλάσεων και ψευδοστοιχείων που υπάρχει τώρα. Μπορείτε να ελέγξετε την υποστήριξη στο caniuse (προς το παρόν δεν υποστηρίζεται σε κανένα πρόγραμμα περιήγησης).</p> <p>Η εφαρμογή στυλ με :placeholder-shown θα είναι πολύ πιο εύκολη:</p>.input :placeholder-shown (χρώμα : μπλε ; )<script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> <div id="post-ratings-1455-loading" class="post-ratings-loading"> <img src="https://realbazar.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy loading=lazy>Φόρτωση...</div> </main> </section> <div id="right-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="wpp-3" class="widget inner-padding popular-posts"> <h4 class="widget-title">Δημοφιλής</h4> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="https://realbazar.ru/el/the-galaxy-s-series/pereustanovit-na-vindovs-7-bez-diska-kak-ustanovit-windows-bez/" title="Πώς να εγκαταστήσετε τα Windows χωρίς δίσκο και μονάδα flash λεπτομερείς οδηγίες" target="_self"><img src="/uploads/f41683315dbe553f1a9d0840ea170769.jpg" width="195" height="98" alt="Πώς να εγκαταστήσετε τα Windows χωρίς δίσκο και μονάδα flash λεπτομερείς οδηγίες" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/the-galaxy-s-series/pereustanovit-na-vindovs-7-bez-diska-kak-ustanovit-windows-bez/" title="Πώς να εγκαταστήσετε τα Windows χωρίς δίσκο και μονάδα flash λεπτομερείς οδηγίες" class="wpp-post-title" target="_self">Πώς να εγκαταστήσετε τα Windows χωρίς δίσκο και μονάδα flash λεπτομερείς οδηγίες</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/samsung-galaxy-s5/etot-izdatel-byl-zablokirovan-i-ego-programmy-ne-budut-zapuskatsya/" title="Απενεργοποίηση ελέγχου εκδότη προγράμματος Αυτός ο εκδότης έχει αποκλειστεί από τα Windows 10" target="_self"><img src="/uploads/ec2cb21f71cc5e6a321d406100951388.jpg" width="195" height="98" alt="Απενεργοποίηση ελέγχου εκδότη προγράμματος Αυτός ο εκδότης έχει αποκλειστεί από τα Windows 10" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/samsung-galaxy-s5/etot-izdatel-byl-zablokirovan-i-ego-programmy-ne-budut-zapuskatsya/" title="Απενεργοποίηση ελέγχου εκδότη προγράμματος Αυτός ο εκδότης έχει αποκλειστεί από τα Windows 10" class="wpp-post-title" target="_self">Απενεργοποίηση ελέγχου εκδότη προγράμματος Αυτός ο εκδότης έχει αποκλειστεί από τα Windows 10</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/tips/proverit-licenziyu-windows-ot-xp-do-windows10-proverka-podlinnosti/" title="Ελέγξτε την άδεια χρήσης των Windows από XP σε Windows10" target="_self"><img src="/uploads/511a0746b7eafbefd473c936e70a785d.jpg" width="195" height="98" alt="Ελέγξτε την άδεια χρήσης των Windows από XP σε Windows10" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/tips/proverit-licenziyu-windows-ot-xp-do-windows10-proverka-podlinnosti/" title="Ελέγξτε την άδεια χρήσης των Windows από XP σε Windows10" class="wpp-post-title" target="_self">Ελέγξτε την άδεια χρήσης των Windows από XP σε Windows10</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/samsung-galaxy-s3/chto-takoe-tp-link-proverennyi-sposob-bystro-nastroit-router-tp-link/" title="Ένας αποδεδειγμένος τρόπος για γρήγορη ρύθμιση ενός δρομολογητή σύνδεσης tp - βήμα προς βήμα και στα ρωσικά" target="_self"><img src="/uploads/b05dce6be5f915015c90f2ae8a912b8b.jpg" width="195" height="98" alt="Ένας αποδεδειγμένος τρόπος για γρήγορη ρύθμιση ενός δρομολογητή σύνδεσης tp - βήμα προς βήμα και στα ρωσικά" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/samsung-galaxy-s3/chto-takoe-tp-link-proverennyi-sposob-bystro-nastroit-router-tp-link/" title="Ένας αποδεδειγμένος τρόπος για γρήγορη ρύθμιση ενός δρομολογητή σύνδεσης tp - βήμα προς βήμα και στα ρωσικά" class="wpp-post-title" target="_self">Ένας αποδεδειγμένος τρόπος για γρήγορη ρύθμιση ενός δρομολογητή σύνδεσης tp - βήμα προς βήμα και στα ρωσικά</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/the-galaxy-s-series/podklyuchenie-marshrutizatora-tp-link-samostoyatelnaya-nastroika-routera-tp/" title="Αυτόματη διαμόρφωση δρομολογητή TP Link για πάροχο Rostelecom" target="_self"><img src="/uploads/86fa4cd4164ee1f2cbc7fd6c2f186c89.jpg" width="195" height="98" alt="Αυτόματη διαμόρφωση δρομολογητή TP Link για πάροχο Rostelecom" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/the-galaxy-s-series/podklyuchenie-marshrutizatora-tp-link-samostoyatelnaya-nastroika-routera-tp/" title="Αυτόματη διαμόρφωση δρομολογητή TP Link για πάροχο Rostelecom" class="wpp-post-title" target="_self">Αυτόματη διαμόρφωση δρομολογητή TP Link για πάροχο Rostelecom</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> </ul> </aside> <style>.rpwe-block ul{ list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a{ display: inline !important; text-decoration: none; } .rpwe-block h3{ background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 16px !important; line-height: 1.5em; } .rpwe-thumb{ border: 2px solid #eee !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary{ font-size: 14px; } .rpwe-time{ color: #bbb; font-size: 11px; } .rpwe-comment{ color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft{ display: inline; float: left; } .rpwe-alignright{ display: inline; float: right; } .rpwe-aligncenter{ display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after{ content: ""; display: table !important; } .rpwe-clearfix:after{ clear: both; } .rpwe-clearfix{ zoom: 1; } </style><aside id="rpwe_widget-2" class="widget inner-padding rpwe_widget recent-posts-extended"><h4 class="widget-title">νέες εγγραφές</h4><div class="rpwe-block "><ul class="rpwe-ul"> <li> <a href="https://realbazar.ru/el/tips/skachat-windows-7-bez-diska-i-fleshki-ustanovka-windows-s-vinchestera/" title="Εγκατάσταση των Windows από σκληρό δίσκο χωρίς μονάδα flash και δίσκο" target="_self"><img src="/uploads/32e0b3ab45a74753889acdeaaee862f4.jpg" width="195" height="98" alt="Εγκατάσταση των Windows από σκληρό δίσκο χωρίς μονάδα flash και δίσκο" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/tips/skachat-windows-7-bez-diska-i-fleshki-ustanovka-windows-s-vinchestera/" title="Εγκατάσταση των Windows από σκληρό δίσκο χωρίς μονάδα flash και δίσκο" class="wpp-post-title" target="_self">Εγκατάσταση των Windows από σκληρό δίσκο χωρίς μονάδα flash και δίσκο</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/the-galaxy-s-series/kak-izmenit-tip-faila-na-fail-izmenyaem-rasshirenie-failov/" title="Αλλαγή της επέκτασης αρχείου" target="_self"><img src="/uploads/e0636ed4e7dcd9da5bf3423e447f8806.jpg" width="195" height="98" alt="Αλλαγή της επέκτασης αρχείου" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/the-galaxy-s-series/kak-izmenit-tip-faila-na-fail-izmenyaem-rasshirenie-failov/" title="Αλλαγή της επέκτασης αρχείου" class="wpp-post-title" target="_self">Αλλαγή της επέκτασης αρχείου</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/games-for-android/kak-proverit-stabilnost-raboty-operativnoi-pamyati-test-operativnoi/" title="Πώς να ελέγξετε τη σταθερότητα της μνήμης RAM" target="_self"><img src="/uploads/ec1a7e933962843b88c02484340bbe07.jpg" width="195" height="98" alt="Πώς να ελέγξετε τη σταθερότητα της μνήμης RAM" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/games-for-android/kak-proverit-stabilnost-raboty-operativnoi-pamyati-test-operativnoi/" title="Πώς να ελέγξετε τη σταθερότητα της μνήμης RAM" class="wpp-post-title" target="_self">Πώς να ελέγξετε τη σταθερότητα της μνήμης RAM</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/the-galaxy-s-series/bolshoi-obzor-utility-dlya-upravleniya-udalennym-pk-gpp-remote-viewer--/" title="GPP Remote Viewer - πλήρης έκδοση Σύνδεση και κωδικοί πρόσβασης gpp remote viewer" target="_self"><img src="/uploads/8200dbe72e88a72671ea6254f7973b2e.jpg" width="195" height="98" alt="GPP Remote Viewer - πλήρης έκδοση Σύνδεση και κωδικοί πρόσβασης gpp remote viewer" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/the-galaxy-s-series/bolshoi-obzor-utility-dlya-upravleniya-udalennym-pk-gpp-remote-viewer--/" title="GPP Remote Viewer - πλήρης έκδοση Σύνδεση και κωδικοί πρόσβασης gpp remote viewer" class="wpp-post-title" target="_self">GPP Remote Viewer - πλήρης έκδοση Σύνδεση και κωδικοί πρόσβασης gpp remote viewer</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> <li> <a href="https://realbazar.ru/el/series-galaxy-a/chto-delat-esli-ischezli-izobrazheniya-iz-galerei-na-android-soobshchenie/" title="Μήνυμα σφάλματος στην εφαρμογή Κάμερα στο Android - γιατί εμφανίζεται και πώς να λύσετε αυτό το πρόβλημα Γιατί δεν υπάρχει συλλογή στο τηλέφωνο" target="_self"><img src="/uploads/07b4905ea84d906f4b9268c683100a85.jpg" width="195" height="98" alt="Μήνυμα σφάλματος στην εφαρμογή Κάμερα στο Android - γιατί εμφανίζεται και πώς να λύσετε αυτό το πρόβλημα Γιατί δεν υπάρχει συλλογή στο τηλέφωνο" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/el/series-galaxy-a/chto-delat-esli-ischezli-izobrazheniya-iz-galerei-na-android-soobshchenie/" title="Μήνυμα σφάλματος στην εφαρμογή Κάμερα στο Android - γιατί εμφανίζεται και πώς να λύσετε αυτό το πρόβλημα Γιατί δεν υπάρχει συλλογή στο τηλέφωνο" class="wpp-post-title" target="_self">Μήνυμα σφάλματος στην εφαρμογή Κάμερα στο Android - γιατί εμφανίζεται και πώς να λύσετε αυτό το πρόβλημα Γιατί δεν υπάρχει συλλογή στο τηλέφωνο</a> <span class="wpp-excerpt">Σε έναν άνθρωπο που έχει το δικό του παιχνίδι...</span> <br><br> </li> </ul></div></aside><aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"> <div class="textwidget custom-html-widget"> </div> </aside> </div> </div> </div> </div> <div class="site-footer grid-container grid-parent "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="categories-3" class="widget inner-padding widget_categories"> <h4 class="widget-title">Κατηγορίες</h4> <ul> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/el/category/samsung-galaxy-s3/" title="Samsung Galaxy S3">Samsung Galaxy S3</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/el/category/samsung-galaxy-s5/" title="Samsung Galaxy S5">Samsung Galaxy S5</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/el/category/games-for-android/" title="Παιχνίδια Android">Παιχνίδια Android</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/el/category/news/" title="Νέα">Νέα</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/el/category/an-overview-of-the-devices/" title="Επισκόπηση συσκευής">Επισκόπηση συσκευής</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/el/category/different/" title="Διάφορος">Διάφορος</a> </li> </ul> </aside> </div> <div class="footer-widget-2 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="text-9" class="widget inner-padding widget_text"> </aside> </div> <div class="footer-widget-3 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="pages-2" class="widget inner-padding widget_pages"> <h4 class="widget-title">Σελίδες</h4> <ul> <li class="page_item page-item-422"><a href="https://realbazar.ru/el/sitemap.xml">χάρτης τοποθεσίας</a></li> <li class="page_item page-item-917"><a href="https://realbazar.ru/el/feedback/">Ανατροφοδότηση</a></li> </ul> </aside> <aside id="text-11" class="widget inner-padding widget_text"> <h4 class="widget-title">© 2022 realbazar.ru</h4> </aside> </div> </div> </div> </div> <footer class="site-info" itemtype="http://schema.org/WPFooter" itemscope="itemscope"> <div class="inside-site-info grid-container grid-parent"> <div class="copyright-bar"> <span class="copyright">2022</span> • </div> </div> </footer> </div> <a id="scroll-to-top" href="#" title="Κάντε κύλιση στην κορυφή">Μπλουζα</a> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.6'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "1" }; /* ]]> */ </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/dropdown.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation-search.min.js?ver=1.4'></script>  <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "sidebar-1", "margin_top": 10, "margin_bottom": 0, "stop_id": "footer-widgets", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['custom_html-2'] }; </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.6'></script> <script type="text/javascript">  </script><br> <br> </body> </html>