Κάποιος με ρώτησε πρόσφατα πώς προσεγγίζω τον εντοπισμό σφαλμάτων inline SVG. Επειδή είναι μέρος του DOM, μπορούμε να επιθεωρήσουμε οποιοδήποτε ενσωματωμένο SVG σε οποιοδήποτε DevTools του προγράμματος περιήγησης. Και γι' αυτό, έχουμε τη δυνατότητα να διερευνήσουμε τα πράγματα και να αποκαλύψουμε πιθανά ζητήματα ή ευκαιρίες για βελτιστοποίηση του SVG.
Αλλά μερικές φορές, δεν μπορούμε καν να δούμε τα SVG μας καθόλου. Σε αυτές τις περιπτώσεις, υπάρχουν έξι συγκεκριμένα πράγματα που αναζητώ όταν πραγματοποιώ διόρθωση σφαλμάτων.
viewBox
αξιών
1. ο Η viewBox
είναι ένα κοινό σημείο σύγχυσης όταν εργάζεστε με SVG. Είναι τεχνικά καλό να χρησιμοποιείτε ενσωματωμένο SVG χωρίς αυτό, αλλά θα χάναμε ένα από τα πιο σημαντικά πλεονεκτήματά του: την κλιμάκωση με το κοντέινερ. Ταυτόχρονα, μπορεί να λειτουργήσει εναντίον μας όταν δεν ρυθμιστεί σωστά, με αποτέλεσμα ανεπιθύμητη αποκοπή.
Τα στοιχεία υπάρχουν όταν κοπούν — βρίσκονται απλώς σε ένα μέρος του συστήματος συντεταγμένων που δεν βλέπουμε. Αν ανοίγαμε το αρχείο σε κάποιο πρόγραμμα επεξεργασίας γραφικών, θα μπορούσε να μοιάζει με αυτό:
Ο ευκολότερος τρόπος να το διορθώσετε; Προσθήκη overflow="visible"
στο SVG, είτε είναι στο φύλλο στυλ μας, ενσωματωμένο στο style
χαρακτηριστικό ή απευθείας ως χαρακτηριστικό παρουσίασης SVG. Αν όμως εφαρμόσουμε και α background-color
στο SVG ή αν έχουμε άλλα στοιχεία γύρω του, τα πράγματα μπορεί να φαίνονται κάπως άδοξα. Σε αυτήν την περίπτωση, η καλύτερη επιλογή θα είναι να επεξεργαστείτε το viewBox
για να δείξει το μέρος του συστήματος συντεταγμένων που ήταν κρυμμένο:
Υπάρχουν μερικά επιπλέον πράγματα σχετικά με το viewBox
που αξίζει να καλύψουμε όσο βρισκόμαστε στο θέμα:
viewBox
λειτουργεί;
Πώς λειτουργεί το Το SVG είναι ένας άπειρος καμβάς, αλλά μπορούμε να ελέγξουμε τι βλέπουμε και πώς το βλέπουμε μέσω της θύρας προβολής και του viewBox
.
Η θύρα προβολής είναι ένα πλαίσιο παραθύρου στον άπειρο καμβά. Οι διαστάσεις του ορίζονται από width
και height
χαρακτηριστικά, ή σε CSS με το αντίστοιχο width
και height
ιδιότητες. Μπορούμε να καθορίσουμε οποιαδήποτε μονάδα μήκους θέλουμε, αλλά αν παρέχουμε αριθμούς χωρίς μονάδες, από προεπιλογή είναι pixel.
Η viewBox
ορίζεται από τέσσερις τιμές. Τα δύο πρώτα είναι το σημείο εκκίνησης στην επάνω αριστερή γωνία (x
και y
τιμές, αρνητικοί αριθμοί επιτρέπονται). Τα επεξεργάζομαι για να ξαναπλαισιώσω την εικόνα. Τα δύο τελευταία είναι το πλάτος και το ύψος του συστήματος συντεταγμένων μέσα στο παράθυρο προβολής — εδώ μπορούμε να επεξεργαστούμε την κλίμακα του πλέγματος (στην οποία θα μπούμε στην ενότητα για μεγέθυνση).
Ακολουθεί η απλοποιημένη σήμανση που δείχνει το SVG viewBox
και την width
και height
ιδιότητες και οι δύο ορίζονται στο <svg>
:
<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>
Αναδιαμόρφωση
Λοιπόν, αυτό:
<svg viewBox="0 0 700 700">
…χάρτες σε αυτό:
<svg viewBox="start-x-axis start-y-axis width height">
Το παράθυρο προβολής που βλέπουμε ξεκινάει από εκεί 0
στον άξονα x και 0
στον άξονα y συναντώνται.
Αλλάζοντας αυτό:
<svg viewBox="0 0 700 700">
…σ 'αυτό:
<svg viewBox="300 200 700 700">
…το πλάτος και το ύψος παραμένουν ίδια (700
μονάδες το καθένα), αλλά η έναρξη του συστήματος συντεταγμένων είναι τώρα στο 300
σημείο στον άξονα x και 200
στον άξονα y.
Στο παρακάτω βίντεο προσθέτω ένα κόκκινο <circle>
στο SVG με το κέντρο του στο 300
σημείο στον άξονα x και 200
στον άξονα y. Παρατηρήστε πώς αλλάζετε το viewBox
οι συντεταγμένες στις ίδιες τιμές αλλάζουν επίσης την τοποθέτηση του κύκλου στην επάνω αριστερή γωνία του πλαισίου ενώ το μέγεθος που αποδίδεται του SVG παραμένει το ίδιο (700
×700
). Το μόνο που έκανα ήταν να «αναπλαισιώσω» τα πράγματα με το viewBox
.
μεγέθυνση
Μπορούμε να αλλάξουμε τις δύο τελευταίες τιμές μέσα στο viewBox
για μεγέθυνση ή σμίκρυνση της εικόνας. Όσο μεγαλύτερες είναι οι τιμές, τόσο περισσότερες μονάδες SVG προστίθενται για να χωρέσουν στη θύρα προβολής, με αποτέλεσμα μια μικρότερη εικόνα. Αν θέλουμε να διατηρήσουμε μια αναλογία 1:1, η δική μας viewBox
το πλάτος και το ύψος πρέπει να ταιριάζουν με τις τιμές πλάτους και ύψους της θύρας προβολής.
Ας δούμε τι συμβαίνει στο Illustrator όταν αλλάξουμε αυτές τις παραμέτρους. Το artboard είναι το viewport
που αντιπροσωπεύεται από ένα λευκό τετράγωνο 700 px. Οτιδήποτε άλλο εκτός αυτής της περιοχής είναι ο άπειρος καμβάς μας SVG και περικόπτεται από προεπιλογή.
Το σχήμα 1 παρακάτω δείχνει μια μπλε κουκκίδα στο 900
κατά μήκος του άξονα x και 900
κατά μήκος του άξονα y. Αν αλλάξω τα δύο τελευταία viewBox
αξίες από 700
προς την 900
σαν αυτό:
<svg viewBox="300 200 900 900" width="700" height="700">
…τότε η μπλε κουκκίδα είναι σχεδόν πλήρως πίσω στην όψη, όπως φαίνεται στην Εικόνα 2 παρακάτω. Η εικόνα μας μειώθηκε επειδή αυξήσαμε τις τιμές του ViewBox, αλλά οι πραγματικές διαστάσεις πλάτους και ύψους του SVG παρέμειναν οι ίδιες και η μπλε κουκκίδα έκανε τον δρόμο της επιστροφής πιο κοντά στην περιοχή χωρίς περικοπή.
Υπάρχει ένα ροζ τετράγωνο ως απόδειξη του τρόπου με τον οποίο το πλέγμα κλιμακώνεται για να ταιριάζει στο παράθυρο προβολής: η μονάδα γίνεται μικρότερη και περισσότερες γραμμές πλέγματος χωρούν στην ίδια περιοχή της θύρας προβολής. Μπορείτε να παίξετε με τις ίδιες τιμές στο παρακάτω στυλό για να δείτε ότι λειτουργεί σε δράση:
width
και height
2. Λείπει Ένα άλλο κοινό πράγμα που εξετάζω κατά τον εντοπισμό σφαλμάτων inline SVG είναι εάν η σήμανση περιέχει το width
or height
γνωρίσματα. Αυτό δεν είναι μεγάλη υπόθεση σε πολλές περιπτώσεις, εκτός εάν το SVG βρίσκεται μέσα σε ένα κοντέινερ με απόλυτη τοποθέτηση ή σε ένα ευέλικτο δοχείο (όπως το Safari υπολογίζει το SVG width
αξία με 0px
αντί του auto
). Εξαιρώντας width
or height
σε αυτές τις περιπτώσεις μας εμποδίζει να δούμε την πλήρη εικόνα, όπως μπορούμε να δούμε άνοιγμα αυτής της επίδειξης του CodePen και συγκρίνοντάς το σε Chrome, Safari και Firefox (πατήστε τις εικόνες για μεγαλύτερη προβολή).
Η λύση? Προσθέστε ένα πλάτος ή ύψος, είτε ως χαρακτηριστικό παρουσίασης, είτε ως ενσωματωμένο χαρακτηριστικό στυλ είτε σε CSS. Αποφύγετε τη χρήση του ύψους από μόνο του, ιδιαίτερα όταν είναι ρυθμισμένο σε 100%
or auto
. Μια άλλη λύση είναι να ορίστε το σωστό και αριστερές τιμές.
Μπορείτε να παίξετε με το παρακάτω στυλό και συνδυάστε τις διάφορες επιλογές.
fill
και stroke
χρωματιστά
3. Εκ παραδρομής Μπορεί επίσης να είναι ότι εφαρμόζουμε χρώμα στο <svg>
ετικέτα, είτε πρόκειται για ενσωματωμένο στυλ είτε προέρχεται από CSS. Αυτό είναι εντάξει, αλλά θα μπορούσαν να υπάρχουν άλλες τιμές χρώματος σε όλη τη σήμανση ή στυλ που έρχονται σε αντίθεση με το σύνολο χρωμάτων στο <svg>
, με αποτέλεσμα τα μέρη να είναι αόρατα.
Γι' αυτό τείνω να αναζητώ το fill
και stroke
χαρακτηριστικά στη σήμανση του SVG και διαγράψτε τα. Το παρακάτω βίντεο δείχνει ένα SVG που διαμόρφωσα σε CSS με κόκκινο fill
. Υπάρχουν μερικές περιπτώσεις όπου μέρη του SVG γεμίζονται με λευκό απευθείας στη σήμανση που αφαίρεσα για να αποκαλύψω τα κομμάτια που λείπουν.
4. Λείπουν ταυτότητες
Αυτό μπορεί να φαίνεται εξαιρετικά προφανές, αλλά θα εκπλαγείτε πόσο συχνά το βλέπω να εμφανίζεται. Ας υποθέσουμε ότι δημιουργήσαμε ένα αρχείο SVG στο Illustrator και ήμασταν πολύ επιμελείς όσον αφορά την ονομασία των επιπέδων μας, ώστε να λαμβάνετε ωραία αναγνωριστικά που ταιριάζουν στη σήμανση κατά την εξαγωγή του αρχείου. Και ας υποθέσουμε ότι σκοπεύουμε να διαμορφώσουμε το στυλ αυτού του SVG σε CSS συνδέοντας αυτά τα αναγνωριστικά.
Αυτός είναι ένας ωραίος τρόπος να κάνεις πράγματα. Αλλά υπάρχουν πολλές φορές που έχω δει το ίδιο αρχείο SVG να εξάγεται για δεύτερη φορά στην ίδια τοποθεσία και τα αναγνωριστικά είναι διαφορετικά, συνήθως κατά την απευθείας αντιγραφή/επικόλληση των διανυσμάτων. Ίσως προστέθηκε ένα νέο επίπεδο ή μετονομάστηκε ένα από τα υπάρχοντα ή κάτι τέτοιο. Όποια και αν είναι η περίπτωση, οι κανόνες CSS δεν ταιριάζουν πλέον με τα αναγνωριστικά στη σήμανση SVG, με αποτέλεσμα το SVG να αποδίδεται διαφορετικά από ό,τι θα περιμένατε.
Σε μεγάλα αρχεία SVG μπορεί να δυσκολευτούμε να βρούμε αυτά τα αναγνωριστικά. Αυτή είναι η κατάλληλη στιγμή για να ανοίξετε τα Εργαλεία προγραμματισμού, να επιθεωρήσετε το τμήμα του γραφικού που δεν λειτουργεί και να δείτε εάν αυτά τα αναγνωριστικά εξακολουθούν να ταιριάζουν.
Έτσι, θα έλεγα ότι αξίζει να ανοίξετε ένα εξαγόμενο αρχείο SVG σε ένα πρόγραμμα επεξεργασίας κώδικα και να το συγκρίνετε με το πρωτότυπο πριν ανταλλάξετε τα πράγματα. Εφαρμογές όπως το Illustrator, το Figma και το Sketch είναι έξυπνες, αλλά αυτό δεν σημαίνει ότι δεν είμαστε υπεύθυνοι για τον έλεγχο τους.
5. Λίστα ελέγχου για αποκοπή και κάλυψη
Εάν ένα SVG κοπεί απροσδόκητα και το viewBox
ελέγχει μια χαρά, συνήθως κοιτάζω το CSS clip-path
or mask
ιδιότητες που ενδέχεται να επηρεάσουν την εικόνα. Είναι δελεαστικό να συνεχίσετε να κοιτάτε την ενσωματωμένη σήμανση, αλλά είναι καλό να θυμάστε ότι το στυλ ενός SVG μπορεί να συμβαίνει αλλού.
Αποκοπή και κάλυψη CSS μας επιτρέπουν να «κρύψουμε» μέρη μιας εικόνας ή ενός στοιχείου. Στο SVG, <clipPath>
είναι μια διανυσματική πράξη που κόβει μέρη μιας εικόνας χωρίς αποτελέσματα στα μισά. ο <mask>
Η ετικέτα είναι μια λειτουργία pixel που επιτρέπει τη διαφάνεια, τα εφέ ημιδιαφάνειας και τις θολές άκρες.
Αυτή είναι μια μικρή λίστα ελέγχου για τον εντοπισμό σφαλμάτων σε περιπτώσεις όπου εμπλέκεται η αποκοπή και η κάλυψη:
- Βεβαιωθείτε ότι η διαδρομή αποκοπής (ή η μάσκα) και το γραφικό επικαλύπτονται μεταξύ τους. Τα επικαλυπτόμενα μέρη είναι αυτά που εμφανίζονται.
- Εάν έχετε μια πολύπλοκη διαδρομή που δεν τέμνει το γραφικό σας, δοκιμάστε να εφαρμόσετε μετασχηματισμούς μέχρι να ταιριάζουν.
- Μπορείτε ακόμα να επιθεωρήσετε τον εσωτερικό κώδικα με τα DevTools, παρόλο που το
<clipPath>
or<mask>
δεν αποδίδονται, γι' αυτό χρησιμοποιήστε το! - Αντιγράψτε τη σήμανση μέσα
<clipPath>
και<mask>
και επικολλήστε το πριν κλείσετε το</svg>
ετικέτα. Στη συνέχεια προσθέστε έναfill
σε αυτά τα σχήματα και ελέγξτε τις συντεταγμένες και τις διαστάσεις του SVG. Εάν εξακολουθείτε να μην βλέπετε την εικόνα, δοκιμάστε να προσθέσετεoverflow="hidden"
στο<svg>
tags. - Ελέγξτε ότι a μοναδικός Το ID χρησιμοποιείται για το
<clipPath>
or<mask>
, και ότι το ίδιο αναγνωριστικό εφαρμόζεται στα σχήματα ή την ομάδα σχημάτων που έχουν κοπεί ή καλύπτεται. Μια αναντιστοιχία ταυτότητας θα σπάσει την εμφάνιση. - Ελέγξτε για τυπογραφικά λάθη στη σήμανση μεταξύ των
<clipPath>
or<mask>
ετικέτες. fill
,stroke
,opacity
, ή κάποια άλλα στυλ που εφαρμόζονται στα στοιχεία μέσα<clipPath>
είναι άχρηστα — το μόνο χρήσιμο μέρος είναι η γεωμετρία της περιοχής πλήρωσης αυτών των στοιχείων. Γι' αυτό αν χρησιμοποιήσετε α<polyline>
θα συμπεριφέρεται ως α<polygon>
και αν χρησιμοποιείτε ένα<line>
δεν θα δείτε κανένα αποτέλεσμα αποκοπής.- Εάν δεν βλέπετε την εικόνα σας μετά την εφαρμογή του a
<mask>
, βεβαιωθείτε ότι τοfill
του περιεχομένου κάλυψης δεν είναι εντελώς μαύρο. Η φωτεινότητα του στοιχείου κάλυψης καθορίζει την αδιαφάνεια του τελικού γραφικού. Θα μπορείτε να δείτε μέσα από τα φωτεινότερα μέρη και τα πιο σκοτεινά μέρη θα κρύψουν το περιεχόμενο της εικόνας σας.
Μπορείτε να παίξετε με καλυμμένα και αποκομμένα στοιχεία αυτό το στυλό.
6. Χώροι ονομάτων
Γνωρίζατε ότι η SVG είναι μια γλώσσα σήμανσης που βασίζεται σε XML; Λοιπόν, είναι! Ο χώρος ονομάτων για το SVG έχει οριστεί στο xmlns
Χαρακτηριστικό:
<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>
Υπάρχουν πολλά να ξέρετε για τον χώρο ονομάτων σε XML και το MDN έχει ένα εξαιρετικό primer σε αυτό. Αρκεί να πούμε ότι ο χώρος ονομάτων παρέχει πλαίσιο στο πρόγραμμα περιήγησης, ενημερώνοντάς το ότι η σήμανση είναι συγκεκριμένη για το SVG. Η ιδέα είναι ότι οι χώροι ονομάτων βοηθούν στην αποφυγή διενέξεων όταν περισσότεροι από ένας τύποι XML βρίσκονται στο ίδιο αρχείο, όπως το SVG και το XHTML. Αυτό είναι ένα πολύ λιγότερο κοινό ζήτημα στα σύγχρονα προγράμματα περιήγησης, αλλά θα μπορούσε να βοηθήσει στην εξήγηση των προβλημάτων απόδοσης SVG σε παλαιότερα προγράμματα περιήγησης ή προγράμματα περιήγησης όπως το Gecko που είναι αυστηρά κατά τον ορισμό τύπων εγγράφων και χώρων ονομάτων.
Η προδιαγραφή SVG 2 δεν απαιτεί χώρο ονομάτων όταν χρησιμοποιείτε σύνταξη HTML. Αλλά είναι κρίσιμο εάν η υποστήριξη για προγράμματα περιήγησης παλαιού τύπου είναι προτεραιότητα — επιπλέον, δεν βλάπτει τίποτα να την προσθέσετε. Με αυτόν τον τρόπο, όταν το <html>
στοιχεία xmlns
Το χαρακτηριστικό ορίζεται, δεν θα έρχεται σε σύγκρουση σε αυτές τις σπάνιες περιπτώσεις.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>
Αυτό ισχύει επίσης όταν χρησιμοποιείτε ενσωματωμένο SVG σε CSS, όπως όταν το ορίζετε ως εικόνα φόντου. Στο παρακάτω παράδειγμα, εμφανίζεται ένα εικονίδιο σημάδι επιλογής στην είσοδο μετά την επιτυχή επικύρωση. Έτσι φαίνεται το CSS:
textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}
Όταν αφαιρούμε τον χώρο ονομάτων μέσα στο SVG στην ιδιότητα φόντου, η εικόνα εξαφανίζεται:
Ένα άλλο κοινό πρόθεμα χώρου ονομάτων είναι xlink:href
. Το χρησιμοποιούμε πολύ όταν αναφέρουμε άλλα μέρη του SVG όπως: μοτίβα, φίλτρα, κινούμενα σχέδια ή διαβαθμίσεις. Η σύσταση είναι να αρχίσετε να το αντικαθιστάτε με href
καθώς το άλλο έχει καταργηθεί από το SVG 2, αλλά ενδέχεται να υπάρχουν προβλήματα συμβατότητας με παλαιότερα προγράμματα περιήγησης. Σε αυτή την περίπτωση, μπορούμε να χρησιμοποιήσουμε και τα δύο. Απλώς θυμηθείτε να συμπεριλάβετε τον χώρο ονομάτων xmlns:xlink="http://www.w3.org/1999/xlink"
εάν εξακολουθείτε να χρησιμοποιείτε xlink:href
.
Αναβαθμίστε τις SVG δεξιότητές σας!
Ελπίζω αυτές οι συμβουλές να σας βοηθήσουν να εξοικονομήσετε χρόνο, εάν αντιμετωπίζετε προβλήματα που δεν έχουν αποδοθεί σωστά inline SVG. Αυτά είναι μόνο τα πράγματα που ψάχνω. Ίσως έχετε διαφορετικές κόκκινες σημαίες που προσέχετε — αν ναι, πείτε μου στα σχόλια!
Η ουσία είναι ότι αξίζει να έχουμε τουλάχιστον μια βασική κατανόηση τους διάφορους τρόπους χρήσης του SVG. Προκλήσεις CodePen συχνά ενσωματώνουν SVG και προσφέρουν καλές πρακτικές. Ακολουθούν μερικοί ακόμη πόροι για να ανεβείτε επίπεδο:
Υπάρχουν μερικά άτομα που προτείνω να ακολουθήσω για καλοσύνη που σχετίζεται με το SVG:
- SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
- Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
- πηγή: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/
- 1
- 1: αναλογία 1
- 11
- 7
- 9
- 98
- a
- ικανότητα
- Ικανός
- Σχετικα
- Απόλυτος
- Ενέργειες
- προστιθέμενη
- Πρόσθετος
- Μετά το
- κατά
- Όλα
- επιτρέπει
- Καλώς
- και
- κινούμενα σχέδια
- Άλλος
- εφαρμοσμένος
- Εφαρμογή
- εφαρμόζοντας
- πλησιάζω
- εφαρμογές
- ΠΕΡΙΟΧΗ
- γύρω
- Τέχνη
- έργα τέχνης
- γνωρίσματα
- πίσω
- φόντο
- βασικός
- επειδή
- πριν
- είναι
- παρακάτω
- οφέλη
- ΚΑΛΎΤΕΡΟΣ
- μεταξύ
- Μεγάλος
- Κομμάτι
- Μαύρη
- Μπλε
- Κάτω μέρος
- Διακοπή
- φωτεινότερος
- πρόγραμμα περιήγησης
- browsers
- καμβάς
- περίπτωση
- περιπτώσεις
- CAT
- προκαλώντας
- Κέντρο
- αλλαγή
- Αλλαγές
- αλλαγή
- έλεγχος
- Σημάδι ελέγχου
- έλεγχοι
- Chrome
- Κύκλος
- πιο κοντά
- κλείσιμο
- κωδικός
- χρώμα
- συνδυασμός
- Ελάτε
- ερχομός
- Κοινός
- συγκρίνοντας
- συμβατότητα
- συγκρότημα
- σύγκρουση
- σύγχυση
- Δοχείο
- Περιέχει
- περιεχόμενο
- συμφραζόμενα
- έλεγχος
- συντεταγμένη
- Γωνία
- Αντίστοιχος
- θα μπορούσε να
- Ζευγάρι
- κάλυμμα
- CSS
- περικοπές
- ημερομηνία
- συμφωνία
- Προεπιλογή
- καθορίζοντας
- καθορίζει
- DID
- διαφορετικές
- δύσκολος
- Διαστάσεις
- κατευθείαν
- Όχι
- DOM
- Μην
- DOT
- κάτω
- σχέδιο
- κάθε
- πιο εύκολη
- συντάκτης
- αποτέλεσμα
- αποτελέσματα
- στοιχεία
- αλλού
- εξ ολοκλήρου
- κ.λπ.
- Even
- πάντα
- απόδειξη
- παράδειγμα
- Με εξαίρεση
- υφιστάμενα
- αναμένω
- Εξηγήστε
- αποτυγχάνει
- λίγοι
- σύκο
- Εικόνα
- Αρχεία
- Αρχεία
- γεμάτο
- Φίλτρα
- τελικός
- Εύρεση
- τέλος
- Firefox
- Όνομα
- ταιριάζουν
- σταθερός
- σημαίες
- εύκαμπτος
- Εξής
- ΠΛΑΙΣΙΟ
- από
- πλήρη
- πλήρως
- παίρνω
- καλός
- κλίσεις
- Γραφιστικές
- γραφικών
- εξαιρετική
- Πλέγμα
- Group
- συμβαίνει
- ύψος
- βοήθεια
- εδώ
- κρυμμένο
- Κρύβω
- ελπίζω
- Πως
- Πώς να
- HTML
- HTTPS
- Πληγώνω
- ICON
- ιδέα
- εικόνα
- εικόνες
- in
- περιλαμβάνουν
- ενσωματώνω
- αυξημένη
- Άπειρος
- εισαγωγή
- αντί
- παρεμβαίνουν
- συμμετέχουν
- ζήτημα
- θέματα
- IT
- εαυτό
- Διατήρηση
- Ξέρω
- Γλώσσα
- large
- μεγαλύτερος
- Επίθετο
- στρώμα
- στρώματα
- Κληροδότημα
- Μήκος
- Επίπεδο
- γραμμή
- γραμμές
- λίγο
- τοποθεσία
- πλέον
- ματιά
- μοιάζει
- κοιτάζοντας
- ΦΑΊΝΕΤΑΙ
- χάνουν
- Παρτίδα
- που
- κάνω
- πολοί
- μάσκα
- Ταίριασμα
- ταιριάζουν
- mdn
- Γνωρίστε
- ενδέχεται να
- Λείπει
- ΜΟΝΤΕΡΝΑ
- περισσότερο
- πλέον
- Mozilla
- ονοματοδοσία
- αρνητικός
- Νέα
- αριθμοί
- Εμφανή
- προσφορά
- ONE
- ανοίξτε
- άνοιξε
- άνοιγμα
- λειτουργία
- Ευκαιρίες
- Βελτιστοποίηση
- Επιλογή
- Επιλογές
- πρωτότυπο
- ΑΛΛΑ
- εκτός
- παράμετροι
- μέρος
- ιδιαίτερα
- εξαρτήματα
- μονοπάτι
- πρότυπα
- χώρα
- People
- κομμάτια
- Εικονοκύτταρο
- σχέδιο
- Πλάτων
- Πληροφορία δεδομένων Plato
- Πλάτωνα δεδομένα
- Δοκιμάστε να παίξετε
- Αφθονία
- συν
- Σημείο
- τοποθέτηση
- δυναμικού
- πρακτική
- παρουσίαση
- πρόληψη
- προτεραιότητα
- Πρόγραμμα
- ιδιότητες
- περιουσία
- παρέχουν
- παρέχει
- ΣΠΑΝΙΟΣ
- αναλογία
- πρόσφατα
- Σύσταση
- Red
- Κόκκινες σημαίες
- παραμένουν
- παρέμεινε
- λείψανα
- θυμάμαι
- αφαιρέστε
- Καταργήθηκε
- απόδοση
- εκπροσωπούνται
- απαιτούν
- Υποστηρικτικό υλικό
- υπεύθυνος
- με αποτέλεσμα
- Αποτελέσματα
- αποκαλύπτω
- κανόνες
- Safari
- ίδιο
- Αποθήκευση
- Κλίμακα
- Ζυγός
- απολέπιση
- έκταση
- Δεύτερος
- Τμήμα
- βλέποντας
- σειρά
- τον καθορισμό
- σχήματα
- δείχνουν
- Δείχνει
- σημαντικός
- απλοποιημένη
- αφού
- ΕΞΙ
- Μέγεθος
- small
- μικρότερος
- έξυπνος
- So
- λύση
- μερικοί
- κάτι
- συγκεκριμένες
- προσδιορισμός
- πλατεία
- Εκκίνηση
- Ξεκινήστε
- ξεκινά
- Ακόμη
- Αυστηρός
- στυλ
- επιτυχής
- Σούπερ
- υποστήριξη
- έκπληκτος
- SVG
- σύνταξη
- σύστημα
- TAG
- Πατήστε
- Η
- πράγμα
- πράγματα
- Μέσω
- παντού
- ώρα
- φορές
- συμβουλές
- προς την
- τόνος
- τοπικός
- Διαφάνεια
- αληθής
- αποκαλύπτω
- κατανόηση
- μονάδα
- μονάδες
- ανεπιθύμητος
- us
- χρήση
- συνήθως
- επικύρωση
- αξία
- Αξίες
- διάφορα
- Βίντεο
- Δες
- ορατός
- W3
- Δες
- τρόπους
- Τι
- αν
- Ποιό
- ενώ
- άσπρο
- θα
- χωρίς
- Εργασία
- εργαζόμενος
- αξία
- θα
- XML
- Εσείς
- Σας
- τον εαυτό σας
- zephyrnet
- ζουμ
- μεγέθυνση