Salut, tout le monde.
Aujourd'hui, nous allons parler des fonctionnalités du navigateur et de
ce que vous pouvez faire pour vous assurer que vos sites ont une apparence cohérente,
quelle que soit la façon dont les utilisateurs y accèdent.
Donc, même si HTML5 a vraiment poussé les développeurs de navigateurs à tous
venir à cette implémentation cohérente, ils diffèrent vraiment dans l'affichage et
l'adhésion aux nouvelles balises qui sortent.
Et comme les navigateurs se mettent à jour et changent et que de nouveaux navigateurs sortent, vous allez devoir
garder à l'esprit que tout le monde ne regarde pas votre page de la même façon que vous.
Donc, il est de votre responsabilité de vous assurer que votre page fonctionne pour un large public.
Et bien que nous ayons beaucoup parlé de l'accessibilité et des différentes façons d'
accéder au Web, il s'agit même des implémentations de navigateur les plus basiques.
Donc, d'abord, parlons de gérer ces différences stylistiques.
Le moyen le plus simple d'éliminer les différences de navigateur est
de faire quelque chose appelé une feuille de style par défaut.
Et dans cette feuille de style, vous allez réellement dans et
effacer toutes les valeurs par défaut du navigateur pour les différents éléments qui sont stylés.
Donc, quand vous entrez et que vous le faites, vous preniez, P, H1, H2, tous les titres,
toutes les différentes balises sémantiques et vous y alliez et vous diriez,
je veux qu'ils aient un rembourrage de zéro et une marge de zéro.
Même mes articles de liste ne devraient pas avoir de décoration du tout.
Donc, bien que cela garantira que vous avez un look très cohérent,
je dois admettre que cela va vous rendre la page absolument horrible.
Mais c'est le prix que vous paierez de sorte
que lorsque vous commencez à écrire vos propres règles de style, vous pouvez améliorer et
inévitablement améliorer et votre page sera de mieux en mieux.
Sinon, si vous n'utilisez pas ce que nous appelons cette feuille de style par défaut,
vous allez concevoir votre page, et il sera vraiment difficile
pour vous de vous souvenir si vous avez réellement coché chaque élément que vous utilisez.
L' une des autres choses dont nous voulons parler est de gérer ce que nous appelons des
propriétés non prises en charge.
Donc, d'abord, nous savons que tous les navigateurs ne prennent pas en charge toutes les balises HTML5.
Tu l'as déjà vu, dans le codage que tu as fait avec moi.
De la même manière, tous les navigateurs ne prennent pas en charge toutes les propriétés CSS3.
Il y a certaines propriétés qui semblent vraiment cool sur certains navigateurs, mais
elles ne sont pas gérées par défaut dans d'autres navigateurs.
Mais il y a un moyen de contourner cela dans de nombreux cas.
Et ce que c'est, c'est que les navigateurs offrent des préfixes.
Donc, parfois, ils les appellent des préfixes de navigateur, parfois des préfixes de fournisseur, mais
l'important est que c'est une solution très rapide pour
gérer toutes les options non prises en charge que vous pourriez rencontrer.
Maintenant, quand j'ai vu les préfixes du navigateur, j'étais complètement intimidé.
Je ne savais pas ce qui se passait, et ça avait l'air un peu bizarre,
et je me sentais paresseux et je ne voulais pas m'en occuper.
Mais je suis là pour vous dire, c'est vraiment très, très facile d'utiliser ces préfixes.
Jetons un coup d'oeil à ce dont je parle.
Vous avez utilisé différentes propriétés et le navigateur fonctionne avec un peu de chance.
Mais maintenant, pour certaines de ces propriétés, vous allez vouloir ajouter un préfixe ou
un peu en face, comme webkit, moz, ms, ou o pour Opera.
Chacun de ces préfixes dit, hey, si vous êtes sur ce navigateur particulier,
c'est ce que j'ai besoin que vous fassiez pour obtenir le look que le concepteur va chercher.
Alors, quelles sont certaines de ces propriétés qui ne sont souvent pas prises en charge ?
Ils incluent le nombre de colonnes,
ce qui permet d'ajouter plusieurs colonnes dans vos paragraphes ou divs.
C' est une façon vraiment agréable de briser votre texte qui est réactif.
Donc, si quelqu'un redimensionne la page, les paragraphes se redimensionnent réellement.
Nous avons une autre chose appelée border-rayon, que les gens aiment vraiment
utiliser parce qu'elle ajoute un peu de bord arrondi aux bordures de vos éléments.
Une troisième option serait dégradé.
Et le dégradé est un type très cool de couleur de fond qui laisse la couleur passer
d'une nuance de bleu à peut-être gris ou rouge ou quelque chose comme ça.
Et cela lui donne une apparence différente.
Maintenant, il n'y a aucun moyen
pour vous de savoir vraiment quelles propriétés sont prises en charge et celles qui ne le sont pas.
J' ai donc ce lien ici vers un site appelé caniuse.com.
Et ce que caniuse.com fait, c'est qu'il répertorie les différentes propriétés et
il vous indique quels navigateurs les prennent en charge et ceux qui ont besoin des préfixes.
C' est donc une bonne idée de vérifier ce site lorsque vous commencez à développer votre page.
Mais pour l'instant, allons de l'avant et regardons un exemple.
Donc, dans cet exemple, j'ai un fichier appelé prefixes.html.
Et je veux juste vous montrer rapidement à quoi ça ressemble à la fois Chrome ici,
et aussi sur Safari.
Ils ont l'air assez semblables.
Mais il y a peu d'espaces où la police peut ne pas correspondre exactement, ou
une partie de l'espacement peut ne pas correspondre exactement.
Donc, si je voulais m'en débarrasser, si je voulais vraiment m'assurer que
les pages ressemblent exactement, ce que je peux faire est d'ajouter une feuille de style par défaut.
Alors passons ici, et
je vais dire hey je veux utiliser ma feuille de style par défaut.
Et à quoi ça ressemble, c'est un fichier vraiment fou où j'ai répertorié
tous les différents éléments.
Et après ça, mettez des choses comme,
je ne veux pas de rembourrage, je ne veux pas de marge.
Si j'ai des listes, débarrassez-vous du style de liste.
Rends ça aussi moche que tu peux.
Donc, si je retourne ici, vous ne verrez peut-être pas une énorme différence parce que les navigateurs
sont déjà assez simples, mais vous pouvez voir les choses bougent légèrement.
On se débarrasse d'un peu de trucs.
Et de la même manière, quand je rafraîchis le Safari,
ils vont ressembler un peu plus.
Alors maintenant, allons de l'avant et
regardons cet exemple où certaines des propriétés ne sont pas prises en charge.
Et je vais revenir à mon fichier HTML, et je vais dire, hé, je veux
utiliser ma feuille de style pour aller de l'avant et styliser certaines choses qui ne sont pas toujours supportées.
Et les choses dont je parle spécifiquement, c'est que
nous allons commencer par cette idée du comptage des colonnes.
Comment fonctionne le nombre de colonnes et l'écart de colonnes, dites-vous au navigateur
combien de colonnes vous voulez et combien d'espace vous voulez entre ces colonnes.
Alors maintenant, quand je rafraîchis, vous pouvez voir qu'il est passé d'
un long paragraphe de bloc à que tout est divisé.
Et c'est vraiment cool parce que c'est dynamique.
Si je redimensionne le navigateur, tout bouge.
Et c'est une façon vraiment cool de le faire.
Une des autres choses que je voudrais ajouter comme quelque chose à regarder, est cette idée
de au lieu d'avoir un carré, je veux un peu arrondir les bords un peu.
Donc, vous faites cela en ajoutant ce qu'on appelle le rayon de bordure.
Maintenant je vais m'arrêter avant de rafraîchir la page, car je veux
vous signaler quelque chose au cas où vous seriez aussi intimidé que moi quand j'ai commencé à faire ça.
Le rayon de la frontière est juste une propriété simple qui existe depuis un certain temps.
Et vous pouvez le voir ici, et vous lui donnez une valeur.
Même avec le nombre de colonnes et l'écart de colonnes.
Toute cette idée d'ajouter des préfixes signifie simplement, prendre votre propriété régulière et
gifler ces préfixes dessus.
Vous n'avez pas besoin d'apprendre quoi que ce soit de nouveau, vous avez juste besoin de vous rappeler les noms des préfixes.
Et donc je veux que tu essaies d'embrasser ça, et
que tu réalises que tu ne fais rien de trop spectaculaire.
Maintenant que j'ai fait ça, j'en ai fait 25.
Et je vais aller de l'avant et le rafraîchir.
Et comme vous pouvez le voir, j'ai un peu courbé les différents bords autour du côté,
ce qui est plutôt cool.
La dernière chose que je vais faire est d'ajouter un dégradé à la couleur.
Donc maintenant, je suis une couleur bleue cohérente.
Et il est important que peu importe ce que vous donnez une sorte de couleur d'arrière-plan,
que vous aimeriez être utilisé, soit le cas où le dégradé ne se produit pas.
Mais maintenant, pour le dégradé linéaire, vous donnez simplement deux couleurs que vous aimeriez
voir et dire combien vous voulez au début et à la fin.
Donc, encore une fois, j'ai du bleu régulier.
Et maintenant, quand je me rafraîchis, je passe d'un bleu à une sorte de gris clair.
C' est cool et c'est beaucoup de code et c'est beaucoup de plaisir à jouer avec.
Alors je veux vous rappeler que quand vous vous développez, n'essayez pas de mémoriser les choses.
N' essaie pas de te rappeler comment tout faire.
Je vais faire un clic droit ici, et faire Inspecter l'élément.
Parce que si vous décidez plus tard que c'est trop une courbe, ou que vous n'aimez pas cette
couleur, ce que vous ne voulez pas faire est de taper, enregistrer, actualiser, taper, enregistrer, actualiser.
Ça devient vraiment ennuyeux.
Donc, à la place, je vais aller juste ici dans ma section et je vais regarder,
et vous pouvez voir dans Inspect Element qu'il disait que je n'ai pas utilisé le préfixe Moz, et que
je n'ai pas utilisé le préfixe Opera, car je n'avais pas besoin de le faire.
Je suis Chrome.
Ce que je peux faire, c'est descendre jusqu'au rayon de la frontière et le changer.
Au lieu de 25 pixels, si je veux moins d'une courbe, je peux en faire 5 pixels.
Vous pouvez le voir en temps réel.
Si tu veux le rendre fou, tu peux en faire 50 pixels.
Vous pouvez également utiliser des pourcentages si vous le souhaitez.
Donc, je vais de l'avant et je mets 15%.
Donc, il est un peu de jouer avec toutes ces choses dynamiquement et puis
une fois que vous obtenez une valeur que vous aimez vraiment, copiez-la et mettez-la dans votre fichier CSS.
Donc, les préfixes du navigateur sont juste quelque chose à jouer avec qui peut être amusant.
Ça peut être frustrant.
Mais la chose la plus importante est que vous devriez réaliser que c'est très simple.
Une des choses que vous pourriez faire pendant que vous ajoutez des préfixes est que
vous réalisez, pour l'instant, la chose la plus facile à faire est d'ajouter ces préfixes à la main.
Mettez la propriété que vous voulez mettre, disons le rayon de la frontière.
Et puis allez dans et ajoutez webkit, moz, les différentes choses comme ça.
Lorsque vous commencez
à utiliser des préfixes, vous allez les ajouter à la main.
Si vous savez que vous avez un rayon frontière, vous allez aller de l'avant et faire le rayon frontière
et ensuite ajouter ce moz, le webkit, différentes choses comme ça à la main.
À mesure que vous devenez plus expérimenté et que vous voulez peut-être essayer différentes choses,
il y a des façons d'automatiser l'ajout de ces préfixes.
Si vous utilisez un éditeur tel que Sublime,
vous pouvez mettre de petits paquets là où vous pouvez contrôler si
vous voulez ou non que Sublime ajoute à ces paquets chaque fois qu'ils voient des propriétés différentes.
Vous pouvez également utiliser des programmes externes qui modifieront dynamiquement votre code au
fur et à mesure que les gens le chargent pour ne mettre que les préfixes dont ils ont besoin.
Si vous vous souvenez dans mon exemple, même si j'utilisais Chrome,
ma feuille de style avait toujours tous les préfixes différents.
Cela ajouterait automatiquement seulement ceux dont vous avez besoin.
Encore une fois, ce sont plutôt cool, mais ne nous inquiétons pas pour eux en ce moment.
Pour l'instant, concentrons-nous sur les bases.
Donc, pour vérifier, lorsque vous commencez à coder,
lorsque vous commencez à créer des feuilles de style, vous allez vouloir
penser à utiliser une feuille de style par défaut pour supprimer ces différences de style.
Et quand tu fais ça, j'ai besoin que tu penses à certaines choses.
Donc, d'abord, cette feuille de style par défaut devrait-elle être interne ou externe ?
Et j'espère que vous avez tous dit extérieur.
Parce que si c'est interne,
ça va remplacer toutes les autres choses que vous avez travaillé si dur à faire.
De la même manière, lorsque vous placez un lien vers votre feuille de style par défaut,
assurez-vous qu'il est en premier.
Parce que la façon dont les navigateurs fonctionnent est qu'il va feuille de style, feuille de style, feuille de style.
Donc, si vous mettez le vôtre en premier, puis la feuille de style par défaut,
il va écraser tout ce que vous avez fait jusqu'à présent.
Enfin, n'oubliez pas que les préfixes du navigateur
peuvent aider à supprimer certaines de ces différences causées par des options non prises en charge.
Mais tu ne veux pas l'utiliser trop.
Ne gifle pas un préfixe sur chaque propriété juste parce que vous n'êtes pas sûr.
Au lieu de cela, vous voulez aller sur ces sites comme puis-je l'utiliser et le tester et
vraiment faire une supposition éclairée sur si vous voulez ou non l'utiliser.
Vous allez vraiment loin dans toute cette idée de développement web.
Et j'espère que vous coiffez des pages vraiment cool.
Et je veux que vous puissiez utiliser toutes les différentes propriétés qui sont là-bas.
Donc, ne soyez pas intimidé par l'idée que vous pourriez avoir à utiliser des feuilles de style que
vous n'avez pas écrites ou que vous devez utiliser des préfixes de navigateur.
Vous l'avez totalement et je sais que vous pouvez coder en utilisant ces différents outils.
Alors bonne chance.