Est-il possible de styliser une iframes avant/après pseudo-élément?
comme le titre le dit, y a-t-il un moyen de styliser un pseudo iframes before/after? Sans envelopper l'iframe avec un autre div, ou autre?`
j'ai essayé de style comme n'importe quel autre élément, mais sans succès:
iframe::before {
content: 'foo';
position: absolute;
top: 0;
left: 0;
}
iframe::after {
content: 'bar';
position: absolute;
top: 0;
right: 0;
}
http://fiddle.jshell.net/ppRqm/
mise à Jour
une solution de contournement connue est d'ajouter l'avant / après à un élément dans la source fichier: http://fiddle.jshell.net/ppRqm/2/
mais parfois vous n'avez pas accès au fichier source.
2 réponses
Je ne suis pas sûr mais je pense que ce n'est pas possible. Ou la logique derrière une iframe rend impossible à atteindre.
Comme vous le savez, les pseudo-éléments sont ajouté à son conteneur, si vous faites cela avec une iframe, des pseudo-éléments seraient ajoutés à l'intérieur de l'iframe. Mais, Et voici le problème, le contenu iframe, le inline content, se chargera seulement si le navigateur ne supporte pas iframes.
Cela signifie que ceci:
<iframe>
<div>Your browser doesn't support iframes</div>
</iframe>
et l'ajout de pseudo-éléments, fera la même chose; sur les navigateurs modernes inline contentne serait pas affiché.
travail Direct pour le débogage
j'ai un niveau CSS de débogage qui donne un outline aux éléments avec un code invalide ou obsolète. Bien que ce ne soit pas exactement une réponse, quelqu'un pourrait la trouver utile car j'essayais de trouver un moyen de s'assurer visuellement que tout contenu intégré avec une iframe avait un allowfullscreen="true" l'attribut/valeur. Ce contournement utilise un sélecteur apparenté et il fonctionne assez bien.
iframe:not([allowfullscreen]) + *::after
{
background-color: #f00;
border: #f00 solid 4px;
color: #fff;
content: 'Missing allowfullscreen attribute on iframe!' !important;
font-size: 24px;
padding: 4px;
}
Direct de Style à l'aide de Tiers L'élément
si vous cherchez une position par rapport à l'iframe, ma prochaine recommandation serait de définir la position parent de l'iframe à position: relative; et set position: absolute; sur un troisième élément pour correspondre à l'iframe est rendu. Enfin, vous pourriez enfin appliquer le ::after sur ce troisième élément.