Pourquoi mes feuilles de style CSS chargées dynamiquement ne fonctionnent-elles que dans certains navigateurs (et comment puis-je y remédier) ?

Chargement dynamique de feuilles de style CSS dans IE

Le chargement dynamique de CSS s'avère souvent inestimable pour créer des conceptions réactives qui minimisent la latence de chargement des pages. Cependant, lorsqu'ils utilisent cette technique, les utilisateurs constatent souvent que leurs styles ne s'appliquent qu'à certains des navigateurs de leur choix.

Dans l'exemple ci-dessous, les styles CSS sont chargés avec succès dans Firefox et Google Chrome mais ne parviennent pas à se charger sur Internet. Explorer (IE).

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

Solution :

La différence vient de la façon dont IE gère le traitement des feuilles de style. Contrairement à d'autres navigateurs, IE autorise uniquement la pièce jointe d'une feuille de style une fois que son moteur de style intégré a analysé tous les styles chargés avec la page. Pour contourner cela, nous exploitons la méthode document.createStyleSheet(url), qui ajoute de manière fiable la feuille de style pendant le processus de chargement.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

En incorporant cette méthode, nous garantissons que le CSS est appliqué dans tous les navigateurs, même ceux avec le comportement de chargement unique d'Internet Explorer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!