Je dois vérifier si une règle CSS existe car je souhaite émettre des avertissements si un fichier CSS n'est pas inclus.
Quelle est la meilleure façon de faire cela?
Je pourrais filtrer via Je voudrais aussi garder les dépendances au minimum.
Y a-t-il un moyen simple de le faire? Dois-je simplement créer des éléments correspondants et tester les effets?
edit: sinon, quelles sont les préoccupations de navigateur croisée de la vérification fenêtre.document.stylesheets.cssrules , mais je ne sais pas comment le navigateur croiseur est (plus je remarque sur le débordement de pile que cet objet est NULL pour stylesheet [0] ).
window.document.stylesheets ?
5 Réponses :
Je ne sais pas si c'est une option pour vous, mais si c'est un fichier unique que vous souhaitez vérifier, vous pouvez écrire votre message d'erreur et basculer le style pour le masquer dans ce fichier.
.include_error {
display: none;
visibility: hidden;
}
Oui, c'était similaire à ma tactique actuelle. Mieux je pouvais faire pour l'instant est '). AddClass ('CSS-File-chargé-marqueur'). CSS ("z-index") == -98256 je n'ai pas de Idée à quel point le navigateur croiseur est-il vraiment, tous les navigateurs soutiennent-ils des indices Z comme ça? Est-ce que tous appliquent CSS à un élément détaché?
Oui, je pense que oui. w3schools.com/cssref/pr_pos_z-index.asp J'aime ma solution plus Comme il a moins de frais généraux et fonctionne même lorsque JavaScript est désactivé ou que JQuery ne pouvait pas charger.
Ouais, je pense que c'est une solution fine, vous avez monté mon uppote. Dans mon cas, j'ai besoin de savoir de JS comme je n'ai aucun contrôle sur le HTML (c'est un widget UI jquery ui) .cs-chargé-chargé-marqueur {z-index: -98256; } et $ ('
Je teste pour une installation appropriée CSS à l'aide de JavaScript.
J'ai une règle CSS dans ma feuille de style qui définit un ID particulier vers la position: Absolute. P>
#testObject {position: absolute;}
Le problème est que cette solution nécessite un contrôle sur le fichier CSS. Et si tu n'as pas ça? Je tiens à tester par exemple qu'un développeur s'est rappelé d'inclure le CSS requis pour un widget tiers. Je pouvais bien sûr choisir l'une des règles là-bas mais fragile fragile fragile.
Vous allez devoir chercher quelque chose! Vous pouvez rechercher une feuille de style incluse avec un nom de fichier particulier ou vous pouvez rechercher l'existence d'une règle particulière. Choisissez ce que vous voulez rechercher. Vous devez rechercher quelque chose. J'ai fait une suggestion, mais vous pouvez rechercher une règle particulière qui est déjà dans la feuille de style si vous le souhaitez. Oui, il est légèrement fragile si la mise en œuvre change beaucoup, mais vous devez rechercher quelque chose afin que tout le fichier puisse changer, vous devez accepter une certaine possibilité que votre méthode de détection puisse casser à l'avenir.
Oui, je ne suis pas contre la recherche de règles, mais à la recherche des effets de ces règles est beaucoup plus fragile, car vous devez équilibrer "quelque chose qu'ils ne sont pas susceptibles de changer" par rapport à "effet" contre "qui est il est peu probable de provoquer une autre règle ". Si vous pouvez simplement tester la présence d'une règle directement, vous éliminez la moitié de cette équation.
@George Mauer - Si vous souhaitez examiner directement la feuille de style, vous pouvez même que c'est un peu mal à faire du navigateur croisé. Mais, examiner l'effet sur une Div Created Created n'est pas plus fragile et beaucoup plus simple à faire le navigateur croisé. Vous créez la DIV avec uniquement l'identifiant ou la classe ciblée et si vous n'allez pas avoir l'effet souhaité, la règle souhaitée ne doit pas être active.
Si vous craignez de ne pas pouvoir modifier les feuilles de style des autres personnes, vous pouvez les proxy à travers une feuille de style de votre propre, en utilisant ceci est Assez si vous voulez simplement savoir si votre code tente de charger la feuille de style mais ne vous aidera pas si vous devez savoir si la feuille de style étranger était ensuite chargée correctement. importer
Je ne comprends pas, comment cela me dit-il si son-stylesheet.css était chargé? La préoccupation spécifique est que j'ai un widget jQuery qui possède des dépendances CSS et je veux consoler.Error un message si elles ne sont pas chargées
L'idée est que vous modifiez toutes les références de votre code de "Son stylesheet.css" à "myProxystylesheet.css". Comme je l'ai mentionné original, cela n'est probablement pas très utile dans votre cas (puisque vous voulez réellement détecter la feuille de style étranger), mais c'est utile si vous pensez que le problème pourrait venir d'oublier simplement d'inclure la feuille de style en premier lieu.
Voici ce que j'ai obtenu cela fonctionne. Il est similaire aux réponses de @smamatti et @ jfriend00 mais plus exaspérée. J'aimerais vraiment qu'il y ait un moyen de tester les règles directement, mais bien.
CSS: P>
$(function () { //Must run on jq ready or $('body') might not exist
var dummyElement = $('<p>')
.hide().css({height: 0, width: 0})
.addClass("my-css-loaded-marker")
.appendTo("body"); //Works without this on firefox for some reason
if (dummyElement.css("z-index") != -98256 && console && console.error) {
console.error("Could not find my-app.css styles. Application requires my-app.css to be loaded in order to function properly");
}
dummyElement.remove();
});
Oh Dammit, dans certains cas, cela échoue sur Chrome. Que diable?
Fonctionne pour moi toujours (notez que je vérifie le style à l'aide de D3). Étrange. Des nouvelles?
J'ai fini par prendre une approche différente, je n'ai pas vraiment essayé de le faire ces derniers temps, désolé.
J'utiliserais un sélecteur CSS comme celui-ci de votre widget JQuery. Si vous obtenez un résultat, cela signifie qu'il existe un élément de liaison qui a une fin de HRREF avec "My-APP.CSS" Suivant Utilisez cette fonction pour valider Une propriété CSS spécifique sur un élément que vous dépendez. Je suggérerais quelque chose de spécifique à vos styles comme la largeur d'un conteneur plutôt quelque chose de aléatoire comme -9999 Zindex comme ce ou
Bonne idée réellement. Il n'a pas été mentionné jusqu'à présent dans ce fil mais "Vérifiez simplement que le lien existe sur la page" est une approche parfaitement valide. Bien que je recommande toujours de fournir un paramètre pour supprimer ce chèque que CSS a été renommé ou combiné.
@Georgemauer Si je construisais un plugin JS qui s'appuyait sur CSS, je ferais la chargement dynamique de la JS dans la page et exécutez un rappel sur la charge. De cette façon, vous contrôlez le nom du fichier et quand il est chargé / disponible.
Nous discutons des minuties ici, mais je serais furieux si j'ai trouvé un composant qui l'a fait sans dérogation car elle brise tout le point de combiner votre JS