Ενσωμάτωση CSS online

Τι κάνει αυτό το εργαλείο

Το εργαλείο αυτό μετατρέπει κανόνες CSS από στοιχεία style σε ενσωματωμένα (inline) στυλ σε κάθε στοιχείο HTML. Αυτό είναι χρήσιμο για email ή συστήματα που απαιτούν inline στυλ.

Παράδειγμα εισόδου και εξόδου

Είσοδος: <style>p{color:red}</style><p>Γειά σου</p>

Έξοδος: Η παράγραφος λαμβάνει δήλωση style="color: red;". Αν είναι επιλεγμένη η αφαίρεση, τα στοιχεία style αφαιρούνται και το αποτέλεσμα είναι πλήρες έγγραφο με doctype.

Πώς λειτουργεί

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

Περιορισμοί

Η μετατροπή είναι ελαφριά και δεν υποστηρίζει πλήρως καταρράκτη CSS, ειδικότητα, media queries, keyframes, ψευδοστοιχεία, ένθετο CSS, εξωτερικά φύλλα στυλ ή υπολογισμένα στυλ. Το πρόγραμμα περιήγησης μπορεί να κανονικοποιήσει το HTML κατά την ανάλυση. Δεν είναι απολυμαντής ούτε εγγυάται ότι η οπτική απόδοση παραμένει ίδια.

Συχνές ερωτήσεις

Τι συμβαίνει με τους μη έγκυρους επιλογείς;

Παραλείπονται σιωπηλά. Δεν προκαλούν σφάλμα, αλλά οι κανόνες τους δεν εφαρμόζονται.

Γιατί το αποτέλεσμα περιέχει πλήρες έγγραφο με doctype;

Όταν είναι επιλεγμένη η αφαίρεση των στοιχείων style, το έγγραφο σειριοποιείται ως πλήρες έγγραφο που αρχίζει με doctype, ώστε να είναι έγκυρο για χρήση σε email ή αλλού.

Μπορώ να χρησιμοποιήσω εξωτερικά φύλλα στυλ;

Όχι. Η μετατροπή εκτελείται τοπικά και δεν φορτώνει εξωτερικά φύλλα στυλ ή απομακρυσμένους πόρους. Πρέπει να επικολλήσετε το CSS στα πεδία εισόδου.

Λίστα ελέγχου

• Ελέγξτε ότι το HTML είναι έγκυρο πριν την επικόλληση.
• Επιβεβαιώστε ότι το επιπλέον CSS είναι σωστό.
• Αποφασίστε αν θέλετε να αφαιρεθούν τα στοιχεία style.
• Μετά τη μετατροπή, ελέγξτε το αποτέλεσμα στον πελάτη email ή στο πρόγραμμα περιήγησης στόχο.