Share
Chaque jour, lors de l'examen de modèles sur ThemeForest, je teste les soumissions pour en vérifier la compatibilité et la compatibilité avec les navigateurs, sans parler de mon propre travail. Au fil du temps, j'ai cherché sur le Web les meilleurs outils de validation et de test de compatibilité de navigateur. Voici mes favoris.
Voyons d’abord quelques méthodes pour vérifier la validation HTML et CSS. Je devrais mentionner que je travaille sur un Mac, donc ceux-ci seront plus orientés sur le Mac. Ne vous inquiétez pas cependant, il existe de nombreuses solutions indépendantes de la plate-forme.
En plus de valider vos fichiers, vous devez également bien formater votre balisage. "Exemples et astuces pour un excellent formatage HTML / CSS" est un article à lire plus à ce sujet.
Le service de validation en ligne du W3C est probablement le plus connu. Vous pouvez valider par URI, téléchargement de fichier ou saisie directe du balisage. Il y a plusieurs options de validation disponibles bien que la plupart du temps, vous n'aurez pas vraiment besoin de les jouer..
Le W3C propose également un service de validation CSS que vous connaissez probablement. Tout comme avec le service de validation HTML, la version CSS comporte des options supplémentaires si nécessaire et permet la validation via URI, le téléchargement de fichier et la saisie de balisage direct..
L'extension de barre d'outils Développeur Web pour Firefox est très populaire et offre une multitude de fonctionnalités exceptionnelles ainsi que d'excellents outils pour vérifier la validation HTML et CSS. Vous pouvez vérifier rapidement la validation du site que vous consultez actuellement ou du fichier local que vous consultez. Il enverra l'URI ou le fichier à vérifier au W3C et affichera les résultats dans un nouvel onglet..
Vous pouvez également activer la "Validation de la page" pour afficher des informations de validation rapides pour HTML et CSS sans avoir à ouvrir un nouvel onglet. Très utile si vous travaillez sur un projet. Vous pouvez également valider bien plus que du HTML et du CSS.
J'utilise Safari comme navigateur Web principal, mais Firefox m'avait gâté avant que je ne passe à l'immense sélection d'extensions telles que la barre d'outils Web Developer et Firebug. Safari dispose de Web Inspector, un outil similaire à Firebug, mais il ne vous permet pas de vérifier la validation des fichiers..
L'utilisation de favelets est un moyen simple et rapide de donner à n'importe quel navigateur principal le moyen de valider HTML et CSS. Les favelets sont des extraits JavaScript associés à des signets pour ajouter des fonctionnalités supplémentaires. Le W3C fournit plusieurs favelets de validation que j'utilise fréquemment avec Safari.
La plupart des éditeurs de développement proposent une sorte d’outil de validation. Coda et CSSEdit sont actuellement mes éditeurs de choix et fournissent tous deux des outils de validation..
Si vous devez vérifier rapidement la validation d'un grand nombre de documents, il peut être difficile de les ouvrir tous dans votre éditeur favori ou via un navigateur. Cette application le rend rapide et facile.
Validateur S.A.C. est une application autonome OS X capable de valider des documents HTML (avec W3C) à l'aide d'un favelet, d'un glisser-déposer, avec des URL ou tout simplement du dossier Fichier> Ouvrir de l'application. J'utilise la méthode glisser-déposer particulièrement souvent. ;-)
Bien que la validation soit très importante, elle est juste un outil pour vous aider à vous assurer que votre code est conforme aux normes et à toutes ces bonnes choses. Si vous utilisez de nouvelles technologies Web, cela peut ne pas valider, mais cela ne signifie pas que vous ne devriez pas l'utiliser. L'innovation naît souvent en enfreignant les règles.
Cela dit, si vous soumettez un modèle en vente sur Theme Forest, assurez-vous que TOUS vos fichiers sont validés. avant soumission. S'il y a des erreurs de validation dues à des choses comme CSS3, assurez-vous de le mentionner dans les notes au relecteur. ;-)
Si tout le monde utilisait les versions les plus récentes de Firefox ou de Safari, les tests de navigateur seraient un jeu d'enfant. Voyons les choses en face, cela ne se produira pas et nous allons nous attaquer aux problèmes d'Internet Explorer pendant des années à venir (pas seulement IE6).
Voici quelques-uns des outils que j'utilise et d'autres que je n'utilise pas pour tester la compatibilité sur Internet Explorer, Safari, Firefox et d'autres navigateurs..
Nous aurons évidemment les navigateurs actuels installés sur nos systèmes tels que Firefox 3.5, Safari 4, Opera et Internet Explorer si vous utilisez Windows..
Si vous avez besoin de tester les anciennes versions de Firefox, il existe plusieurs façons de le faire, mais ce sont les plus faciles que j'ai trouvées..
Portableapps sur Windows exécute Firefox en tant qu'application autonome, donc l'installation n'est pas nécessaire et ne gâchera pas votre installation actuelle de Firefox..
MultiFirefox 2.0 sur Mac vous permet d’exécuter plusieurs versions de Firefox côte à côte en gérant les profils Firefox.
Pour télécharger d'autres versions de Firefox, vous pouvez visiter http://releases.mozilla.org/pub/mozilla.org/firefox/releases/
Malheureusement pour vous, développeurs Web basés sur Windows, je n'ai pas de solution facile pour tester plusieurs versions de Safari. Pour les utilisateurs de Mac, il existe une belle collection de versions autonomes de Safari fournies par Michel Fortin..
Il n'y a pas de moyen facile de tester IE de manière interactive sur Mac, j'utilise donc Parallels pour exécuter une machine virtuelle de Windows XP sur laquelle IETester est installé. Cette application vous permet de tester des versions d’IE aussi anciennes que 5.5 sur Windows XP, Vista et 7..
De temps en temps, je remarque une bizarrerie dans IETester que je ne suis pas sûr que cela se produise dans une version native d'IE6 ou 7; j'ai donc également installé des versions autonomes d'IE6, 7 et 8 à l'aide d'Internet Explorer Collection..
Si vous n'avez pas besoin d'interagir réellement avec votre site dans ces navigateurs, vous pouvez également utiliser plusieurs services de capture instantanée de navigateur, qui ne feront que montrer une image de la manière dont le site recherchera un large éventail de navigateurs..
Adobe a récemment lancé un nouveau service appelé BrowserLab, qui vous permet de visualiser un instantané d’un site Web via une URL dans différents navigateurs. C'est rapide, gratuit et vous donne quelques options d'affichage différentes pour comparer différentes versions de navigateur..
Browsershots.org est la même idée que Adobe BrowserLab mais avec plusieurs différences. Vous pouvez tester plus de navigateurs sur plus de plates-formes avec plus d'options comme la taille de l'écran, la profondeur de couleur, javascript, flash, etc..
Si vous n'avez pas lu "25 services Web essentiels pour les concepteurs", vous devriez le faire. Il propose d'excellents services. C'est ainsi que j'ai découvert Browsercam..
Browsercam est fondamentalement la même chose que Browsershots mais est un service payant mais offre quelques fonctionnalités plus en profondeur et je suppose des résultats plus rapides, bien que je ne l'ait pas encore utilisé.
Donc là vous l'avez. Plusieurs façons de valider et de tester votre travail sous Windows et Mac. Si vous soumettez un modèle à la forêt thématique, vous n’avez plus aucune excuse pour les erreurs de validation ou les incompatibilités de navigateur. La grande majorité des modèles que j'ai examinés sont rejetés en raison d'erreurs de validation et de problèmes de navigateur qui auraient dû être résolus avant d'être soumis..
Si vous utilisez ou connaissez un outil (ou des outils) pour la validation ou le test du navigateur, faites-le nous savoir dans les commentaires..
Accentsconagua