Έλεγχος Inline CSS
Σύντομη απάντηση
Εντοπίστε υπερβολικό inline CSS που επηρεάζει απόδοση και συντηρησιμότητα.
Τι Κάνει
Εντοπίζει κάθε χαρακτηριστικό style="" και κάθε μπλοκ <style> στη σελίδα σας. Αναφέρει πόσα υπάρχουν και το συνολικό τους μέγεθος, εμφανίζει έως 8 παραδείγματα στοιχείων με το CSS τους και προτείνει πώς να μεταφέρετε τα στυλ σε ένα stylesheet.
Γιατί Έχει Σημασία
Τα inline style χαρακτηριστικά δεν μπορούν να αποθηκευτούν στην cache ξεχωριστά, είναι δύσκολο να συντηρηθούν και μπλοκάρονται από μια αυστηρή Content-Security-Policy εκτός αν τα επιτρέψετε ρητά. Η εξαίρεση είναι το κρίσιμο CSS πάνω από το πρώτο πτυχίο σε ένα μπλοκ <style>, το οποίο μπορεί να βοηθήσει την πρώτη απόδοση.
Πώς Λειτουργεί
-
Εισάγετε ένα URL σελίδας ή επικολλήστε το HTML της
-
Ανακτούμε το HTML της σελίδας και αναλύουμε κάθε <element style="">
-
Μετράμε τα inline style χαρακτηριστικά ξεχωριστά από τα inline μπλοκ <style>
-
Επιστρέφουμε το συνολικό μέγεθος inline CSS, έως 8 παραδείγματα στοιχείων και συμβουλές αναδιάρθρωσης
Δείγμα εισόδου + εξόδου
url: https://rankproof.eu/tools
inline style="" attributes: 3 OK inline <style> blocks: 1 OK συνολικό inline CSS: 4.2 KB <div style="margin-top:12px"> <span style="color:#0EA5A4"> <p class="note" style="font-size:14px">
Ποιοι το Χρησιμοποιούν
-
Frontend Developer
Ελέγξτε έναν παλαιότερο ιστότοπο για καθαρισμό inline styles — εξαγάγετε μοτίβα σε utility classes για να ενεργοποιήσετε σωστή cache.
-
Μηχανικός Ασφαλείας
Έλεγχος πριν την ανάπτυξη CSP — κάθε inline `style=""` μπλοκάρει την πολιτική `style-src 'self'`. Εξαγάγετέ τα για να ενεργοποιήσετε αυστηρό CSP.
-
Μηχανικός Απόδοσης
Το inline CSS προσθέτει bytes σε κάθε απόκριση HTML. Μεταφέρετε επαναλαμβανόμενα μοτίβα σε ένα stylesheet με cache — κερδίζει σε κάθε επόμενη φόρτωση σελίδας.
Συχνές Ερωτήσεις
Είναι κακό το inline CSS για το SEO;
Όχι άμεσα. Κάνει τις σελίδες βαρύτερες και δυσκολότερες στη συντήρηση, και εμποδίζει μια αυστηρή Content-Security-Policy.
Πότε είναι κατάλληλο το inline CSS;
Κρίσιμα στυλ πάνω από το πρώτο πτυχίο σε ετικέτες `<style>` (όχι σε χαρακτηριστικά `style=""`), και δυναμικές τιμές ανά στοιχείο που πραγματικά διαφέρουν κατά την εκτέλεση.
Πώς αναδιαρθρώνω inline styles;
Εντοπίστε επαναλαμβανόμενα μοτίβα → εξαγάγετέ τα σε utility classes → προσθέστε τα στο stylesheet σας → αντικαταστήστε το inline `style=""` με `class=""`.
Χαλάει αυτό το CSP;
Ναι — ένα αυστηρό CSP (`style-src 'self'`) μπλοκάρει το inline `style=""`. Θα χρειαζόσασταν `'unsafe-inline'` ή `'unsafe-hashes'` για να το επιτρέψετε.
Τι γίνεται με τα frameworks CSS-in-JS;
Πολλά προσθέτουν ετικέτες <style> ή χαρακτηριστικά style ενώ τρέχει η σελίδα, κάτι που αυτό το εργαλείο δεν βλέπει επειδή διαβάζει το HTML όπως παραδίδεται. Τα περισσότερα μπορούν να εξαγάγουν στατικό CSS κατά το build, που είναι η καλύτερη επιλογή για παραγωγή.