Contenu
- Mise en page
- Clearfix
- Dimensionnement de la boîte
- Multi-colonnes
- Calculs
- Style
- Transparence
- Filtres
- Remplacement d'image
- Vidéo réactive
- Fonctionnalité
- Sélection facile des éléments
- Créer de nouveaux tableaux
- Nettoyer les objets de document et de fenêtre
- Aimait ça? Lisez-les!
Cet article a été publié pour la première fois dans le numéro 234 du magazine .net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web.
Une technique, à la base, est un moyen de mener à bien une tâche et, en tant que développeurs et concepteurs frontend, nous avons beaucoup de tâches. Cela dit, on oublie souvent à quel point ce paysage a changé. De 2002 à 2010, notre communauté était pourrie par le code et les ressources, entravant les performances et la maintenabilité. Pour surmonter cela, nous avons créé une multitude de trucs, astuces et astuces que nous avons surnommés «technique». Nous accomplissions toujours des tâches, mais pas de la manière la plus efficace.
En faisant un 360, les dernières années ont vu de meilleures normes et implémentations de normes prendre vie, ce qui nous a permis en tant que communauté de développer des «techniques» plus récentes et plus avancées. Ce nouveau paysage est ce que l'on considère comme le «Web moderne».
À mesure que le «Web 2.0» est devenu stagnant et déroutant, le «Web moderne» le sera également. Lui donner le temps. Cela dit, pour l'instant, nous pouvons utiliser et abuser du terme tant qu'il y a une compréhension commune de ce qu'il représente.
En 2010, la spécification HTML5 est arrivée, offrant un tout nouvel environnement Web semi-standardisé. Des navigateurs tels qu'Opera, Firefox, Chrome et Safari ont adopté cette nouvelle vague et poussé leurs équipes de développement vers de nouvelles limites d'implémentation de normes et d'exploration d'API. Pour vous donner une idée de l'intégration de ces navigateurs, consultez les visualisations de www.html5readiness.com sur la modification de la prise en charge de HTML5.
Ne vous inquiétez pas du manque de support d'Internet Explorer. Nous pouvons lutter contre cela grâce à Google Chrome Frame. Depuis que Google l'a introduit en 2010, il est devenu le mécanisme d'assistance incontournable pour Internet Explorer. Toutes les versions d'IE peuvent être ciblées avec Chrome Frame, qui invite un nouvel utilisateur à télécharger un plug-in qui restitue les sites Web activés avec une version allégée de Chrome, dans IE. Pour mettre en œuvre Chrome Frame, nous ajoutons la balise meta> suivante dans la balise head> de notre site.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
De là, nous pouvons inviter les utilisateurs d'IE à télécharger le plug-in, s'il n'est pas déjà installé, à l'aide de JavaScript:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = fonction () {
CFInstall.check ({
mode: "superposition",
destination: "http://www.votredomaine.com"
});
};
/ script>
la destination peut être définie pour envoyer l'utilisateur vers un certain lien après l'installation du plug-in. Un mot d'avertissement: bien que Chrome Frame nous donne une méthode de développement strictement pour les navigateurs vraiment modernes, nous ne devons pas oublier que l'utilisateur a la possibilité de ne pas télécharger le plug-in s'il ne le souhaite pas. S'ils ne le font pas, et que vous êtes tenu de fournir une assistance pour l'une ou l'autre des versions différentes d'IE, vous devrez passer un peu plus de temps à découvrir ce que vous pouvez et ne pouvez pas fournir, avec vos expériences, cross-browser..
Avec ce code offrant des conditions de jeu beaucoup plus équitables pour le développement sur la pile Web moderne, nous pouvons avancer l'esprit tranquille. Vous vous souvenez peut-être d'avoir à créer un certain nombre de hacks spécifiques au navigateur pour que votre site soit structuré correctement entre les navigateurs, en créant un nombre incalculable d'éléments vides à utiliser avec vos images découpées, ou même en écrivant un code JavaScript trop verbeux ou redondant pour obtenir le la plus simple des fonctionnalités à travailler. Toutes ces douleurs sont, dans un certain sens, les mêmes problèmes qui nous préoccupent aujourd'hui. Nous nous battons toujours pour plus de contrôle et de meilleurs outils pour lutter contre la mise en page, le style et les fonctionnalités, mais à un niveau mature.
Mise en page
Clearfix
Faire flotter un élément a été introduit dans CSS 2.1 mais ne s'est jamais avéré être la solution complète que nous espérions. L'un des plus gros problèmes était de conserver les dimensions d'un élément parent lorsqu'un élément enfant flottait. Pour résoudre ce problème, la technique clearfix a été créée.
Prenez le code HTML suivant:
div>
div> ... / div>
div> ... / div>
/ div>
Cette technique a été écrite par Nicolas Gallagher:
.clearfix: avant,
.clearfix: après {
contenu: " ";
affichage: table;
}
.clearfix: après {
clarifier les deux;
}
.clearfix {
* zoom: 1;
}
Si vous utilisez HTML5Boilerplate pour lancer vos projets, vous aurez déjà intégré cette version de la technique clearfix.
Dimensionnement de la boîte
Pendant des années, les développeurs ont débattu de la mise en œuvre du modèle de boîte qui avait plus de sens. Le mode Quirks vs Standards signifiait vraiment: «si les dimensions d'un élément devaient changer, après avoir été définies, lorsque les bordures et le remplissage sont appliqués ou non».
Il est maintenant largement admis qu'il est plus logique que les bordures et le rembourrage suppriment l'espace disponible dans un élément et ne s'ajoutent pas à la largeur ou à la hauteur de l'élément. Le débat a été rendu inutile avec la mise en œuvre généralisée du dimensionnement des boîtes. Le navigateur prendra ses repères de vous au lieu de l'inverse.
Popularisée par Chris Coyier et Paul Irish, une technique globale peut être mise en œuvre avec les éléments suivants:
* {
-webkit-box-dimensionnement: border-box;
-moz-box-sizing: border-box;
box-dimensionnement: border-box;
}
L'utilisation du sélecteur * dans CSS a été débattue, en raison de problèmes de performances potentiels. Ces types de réclamations sont frivoles si vous n'optimisez pas tous les autres aspects de votre site Web / application. L'utilisation de border-box obligera le navigateur à ajouter un remplissage et des bordures à l'intérieur de l'espace disponible. Le «Mode standard» peut être utilisé en définissant le dimensionnement de la boîte sur content-box.
Multi-colonnes
Le Web a été grandement inspiré par la forme et le type écrits. Malheureusement, nous sommes restés coincés à la phase de parchemin. Certains de ces problèmes arrivent à un point culminant avec les spécifications attendues depuis longtemps pour les médias paginés et les régions CSS. Cela dit, les premiers pas vers des mises en page de type magazine ont été franchis lorsque les navigateurs ont commencé à implémenter des multi-colonnes CSS. Le code pour générer cet effet est assez simple:
p {
-webkit-column-count: 2;
-moz-column-count: 2;
nombre de colonnes: 2;
}
Vous pouvez en savoir plus sur la spécification multi-colonnes CSS3, ainsi que sur une solution de secours JavaScript que vous pouvez utiliser pour n'importe quel navigateur sans support, sur le blog de A List Apart.
Calculs
Le calcul des dimensions peut être difficile. À l'époque, nous n'avions aucun moyen de faire des calculs d'unités, encore moins des calculs d'unités mixtes. Tout cela a changé grâce à calc. Création d'un effet rembourré qui n'affecte pas la largeur initiale des éléments ou utilise quelque chose comme box-sizing: border-box; n'était, jusqu'à récemment, possible qu'en ajoutant des éléments supplémentaires.
.padded {
marge: 0 auto;
position: relative;
largeur: -webkit-calc (100% - (20px * 2));
largeur: -moz-calc (100% - (20px * 2));
largeur: calc (100% - (20px * 2));
}
calc () prend en charge le calcul de largeur approprié basé sur la largeur parent de .padded et moins un remplissage défini de 20px. J'ai multiplié cela par 2 pour chaque côté de mon élément, en centrant l'élément en utilisant un positionnement relatif et une marge gauche et droite automatique.
Style
Transparence
Obtenir le bon style d'élément a toujours été dépendant du type d'outils dont nous disposions en CSS. La transparence est l'une des premières variantes de support que vous rencontreriez entre le début et le milieu des années 2000.
Avec l'avènement du HTML5 et des efforts de normalisation plus ciblés, les navigateurs ont une implémentation standard de la propriété d'opacity et ont exposé la prise en charge du canal alpha conformément à la nouvelle spécification du module de couleur. Cela inclut les directives RGBA et HSLA.
une {
couleur: rgba (0,255,0,0,5);
arrière-plan: rgba (0,0,255,0,05);
bordure: rgba (255,0,0,0,5);
}
Vous pouvez utiliser des couleurs RGBA ou HSLA partout où vous trouvez des valeurs HEX. Il existe également une liste étendue de couleurs amusantes avec des noms définis que vous pouvez consulter directement dans la spécification. Ceux-ci sont utiles lorsque vous souhaitez créer un mélange dynamique entre les éléments.
Filtres
Les filtres CSS sont extrêmement intéressants. Avoir la possibilité de modifier dynamiquement l'aspect et la convivialité des éléments d'une page sans avoir besoin de plug-ins tiers est incroyable et vous aidera à réduire considérablement votre temps passé dans Photoshop.
img src = "market.webp">
img {
-webkit-filter: niveaux de gris (100%);
}
Les filtres CSS ne sont actuellement pris en charge que dans les navigateurs WebKit, leur utilisation doit donc être de nature additive et non dépendante. En savoir plus ici.
Remplacement d'image
Le remplacement du texte par des images existe depuis longtemps. Malheureusement, il existe encore des inconvénients, du point de vue de l'accessibilité, aux techniques de remplacement d'image les plus récentes et les plus sophistiquées. Mais deux sont récemment apparus qui sont extrêmement intelligents et uniques en leur genre. Le premier a été écrit par Scott Kellman:
h1 class = 'hide-text'> Logo de mon site Web / h1>
.hide-text {
retrait de texte: 100%;
espace blanc: nowrap;
débordement caché;
}
Le second a été écrit par Nicolas Gallagher:
.hide-text {
police: 0/0 a;
ombre de texte: aucun;
couleur: transparent;
}
Vidéo réactive
Faire évoluer correctement les médias dans un environnement réactif peut être difficile. Avec de plus en plus de sites Web respectant la conception adaptative, il est essentiel de gérer correctement les dimensions et les proportions des éléments.
La vidéo intégrée a été l'un des types de médias les plus difficiles à affronter en raison de la manière dont les services tiers diffusent le contenu. Une intégration YouTube typique ressemble à ceci:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
L'élément iframe contient alors un objet Flash ou un élément incorporé. Utilisation de quelque chose comme iframe {maxwidth: 100%; } ne fonctionnera pas car les éléments imbriqués ne se redimensionnent pas correctement lorsque la largeur change. Donc, nous devons faire une supercherie.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Emballer l'iframe dans un autre élément nous donnera le contrôle dont nous avons besoin pour ajouter des fonctionnalités réactives appropriées à la vidéo.
.vidéo {
position: relative;
rembourrage bas: 56,25%;
hauteur: 0;
débordement caché;
}
iframe vidéo,
objet .video,
.video embed {
position: absolue;
haut: 0;
gauche: 0;
largeur: 100%;
hauteur: 100%;
}
Réglage du fond de remplissage du wrapper .video: 56,25%; est la magie de cette méthode. L'utilisation du remplissage signifie que le pourcentage utilisé sera basé sur la largeur du parent; «56 .25%» créera un rapport hauteur / largeur 16: 9. Faites le calcul vous-même, si vous le souhaitez. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (c'est notre pourcentage).
Fonctionnalité
Sélection facile des éléments
Avec la popularité d'un certain nombre de bibliothèques JavaScript (jQuery, par exemple), le comité ECMAScript et les normes du W3C ont pris note de l'une des principales fonctionnalités qui manquaient aux développeurs: une bonne sélection d'éléments. Des méthodes telles que getElementByID () et getElementByClassName () étaient rapides mais pas aussi flexibles et robustes que les moteurs de sélection provenant de la communauté des développeurs; querySelectorAll () était le moyen utilisé par l'organisme de normalisation pour imiter une partie de cette flexibilité dans une méthode de sélection native.
var items = document.querySelectorAll ('# header .item');
querySelectorAll () peut recevoir des sélecteurs multiples et mixtes. En savoir plus à ce sujet.
Créer de nouveaux tableaux
Itérer sur un tableau est quelque chose qui devient fastidieux à écrire. Ecrire et réécrire pour les boucles () n'est pas amusant. Dans JS version 1.6, la méthode map () a atterri en fournissant un support pour un moyen facile d'itérer et de créer un nouveau tableau à partir d'un autre.
var people = ['Heather', 'James', 'Kari', 'Kevin'];
var accueille = people.map (fonction (nom) {
retourne "Salut" + nom + "!";
});
En exécutant ce code, si nous devions console.log (accueille) vous verriez bienvenu est un nouveau tableau [«Salut Heather!», «Salut James!», «Salut Kari!», «Salut Kevin!» ].
Nettoyer les objets de document et de fenêtre
Les bibliothèques JavaScript tierces ont tendance à perturber les objets de document et de fenêtre natifs. Cela peut être un problème pour d'autres bibliothèques tierces et pour le développeur qui les inclut. En tant que partie, assurez-vous de travailler avec une version propre des deux objets en créant une nouvelle instance de ceux-ci. La meilleure façon de faire est de créer un élément iframe, de l'insérer dans le DOM et de stocker les nouvelles instances de ces objets.
var iframe = document.createElement ('iframe');
iframe.style.display = "aucun";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Bien qu'il y ait eu de grandes améliorations à la pile Web, continuer à compléter et à perfectionner notre suite technologique pour relever les défis auxquels nous sommes confrontés dans la mise en page, le style et la fonctionnalité de notre projet est toujours extrêmement important. Pour maintenir un bon écosystème de croissance, nous devons encourager les organismes de normalisation et les fournisseurs de navigateurs à continuer de progresser avec de nouvelles spécifications et des implémentations de fonctionnalités innovantes tout en partageant nos propres connaissances avec d'autres développeurs et concepteurs. Plus d'informations, moins de hacks.
Darcy Clarke est un développeur primé, cofondateur de la société de thèmes WordPress Themify et de l'agrégateur de transactions quotidiennes DealPage, et membre de l'équipe jQuery. Il travaille chez Polar Mobile en tant que développeur UX senior.
Aimait ça? Lisez-les!
- Comment créer une application
- Téléchargez les meilleures polices gratuites
- Pinceaux Photoshop gratuits que chaque création doit avoir
- Tutoriels Illustrator: des idées incroyables à essayer dès aujourd'hui!
- Grands exemples d'art de griffonnage
- Sélection de didacticiels Wordpress brillante
- Les meilleures polices Web gratuites pour les concepteurs
- Téléchargez des textures gratuites: haute résolution et prêtes à l'emploi maintenant
