Inclure le fichier HTML dans un autre en utilisant l'importation HTML

HTML est le langage standard qui forme une page Web, mais il n'est pas facile à étendre ou à maintenir. Nous avons besoin d'une autre langue en tant que couche qui nous permette de générer dynamiquement du HTML . HTML Import est un nouveau module standard qui essaie de rendre le HTML plus flexible.

L'importation HTML nous permet d'inclure un fichier HTML dans un autre fichier HTML. Nous pouvons également accéder et réutiliser le contenu à l'intérieur. Ceci est une nouvelle fonctionnalité intéressante qui peut changer la façon dont nous construisons du HTML dans (peut-être) la prochaine décennie.

Au moment de la rédaction de ce document, cependant, l'importation HTML est toujours à l'étape de la version de travail et Chrome (v36 et versions ultérieures) est le seul navigateur qui le prend en charge.

Notez cependant que cette fonctionnalité est désactivée par deault. Pour activer l'importation HTML dans Chrome, accédez à la page chrome: // flags , activez l'option Activer les importations HTML, puis redémarrez Chrome . Commençons à expérimenter avec HTML Import.

Comment utiliser l'importation HTML

Y compris un modèle HTML est similaire à la façon dont nous incluons une feuille de style, nous utilisons le marque. Mais au lieu d'utiliser rel=stylesheet, nous ajoutons la balise link avec rel=import . A titre d'exemple, j'inclurai ici un template nommé template.html (j'ai ajouté quelques lignes de contenu fictif).

Maintenant, si vous voyez la page Web via l' outil Chrome DevTools sous l'onglet Réseau, vous pouvez voir que le navigateur (Chrome) charge le template.html .

Gardez à l'esprit que le contenu du fichier importé n'est pas ajouté instantanément au fichier HTML principal. Lorsque vous voyez le fichier HTML principal, vous ne verrez rien pour le moment.

Réutiliser le contenu

Pour ajouter le contenu dans le fichier, nous devons écrire quelques lignes de JavaScript. Normalement, nous pouvons mettre un script dans la balise head . Mais dans ce cas particulier, nous pouvons ajouter le script dans le corps. Aussi, pour que ce script suivant fonctionne, nous devons le mettre après le rel=import . Nous devons nous assurer que le contenu de rel=import a été complètement chargé par le navigateur avant le script, afin que le script puisse reconnaître les éléments, l'identifiant de l'élément ou les classes dans ce fichier.

Pour commencer, nous sélectionnons le fichier modèle avec ce code.

 var getImport = document.quearySelector ('link [rel = import]'); 

Ceci sélectionnera toute la balise de link avec rel=import . Vous pouvez importer plusieurs fichiers HTML et ne sélectionner qu'une seule balise de lien spécifique, vous pouvez ajouter un id à la balise de lien et la sélectionner en utilisant l' id au lieu du link[rel=import], comme indiqué ci-dessus.

Par exemple, en supposant que vous importiez des fichiers, comme ceci:

vous pouvez remplacer le code par:

 var getImport = document.querySelector ('# template-file'); 

Une fois le fichier sélectionné, nous devons sélectionner le contenu que nous allons ajouter au fichier principal. Si le contenu est inclus avec un id="content", vous pouvez sélectionner le contenu de cette façon.

 var getContent = getImport.import.querySelector ('# content'); 

Maintenant, nous pouvons ajouter le contenu dans le body utilisant la méthode JavaScript appendChild() .

 document.body.appendChild (document.importNode (getContent, true)); 

Le contenu devrait maintenant apparaître dans le fichier principal.

Utilisation de la feuille de style

Contrairement à la façon dont nous ajoutons du contenu, la feuille de style que nous mettons dans le fichier importé affectera directement le contenu principal. Ici, nous avons ajouté style.css dans le fichier modèle, contenant le code suivant qui devrait changer la couleur du paragraphe en rouge.

 p {couleur: rouge; } 

Le style prend effet immédiatement, comme suit.

• Voir la démo
• Source de téléchargement

Pensée finale

HTML Imports est utile pour créer une page Web modulaire et maintenable. Mais, gardez à l'esprit que cette méthode, en utilisant HTML Import, peut ne pas convenir si le référencement est important. Le contenu est ajouté en JavaScript, ce qui est invisible pour les moteurs de recherche . Utilisez HTML Import avec parcimonie, uniquement pour ajouter du contenu supplémentaire ou secondaire à votre page Web.

Google commence à tester la fonctionnalité des applications instantanées pour Android

Retour à Google I / O, Google a taquiné une petite fonctionnalité appelée "Instant Apps" qui fera son chemin vers les appareils Android. Après une longue attente, Google est prêt à tester cette fonctionnalité avec un petit nombre de partenaires.Pour ceux qui ne connaissent pas la fonctionnalité des applications instantanées, Google propose de créer des petits paquets qui peuvent être lancés instantanément en tapant sur l'URL. La meilleure

(Conseils techniques et de conception)

18 utilisations créatives de la typographie dans les jeux vidéo

Il y a un argument à savoir si les jeux vidéo devraient être considérés comme une forme d'art. Peu importe de quel côté vous êtes, on ne peut nier que les jeux vidéo intègrent plusieurs formes d'art dans leur récit et leur gameplay dans le cadre de l'intrigue, de la direction artistique ou de l'audio.Les jeux v

(Conseils techniques et de conception)