Comment styliser des IFrames avec CSS

Lorsque vous incorporez un élément dans votre code HTML, vous avez deux possibilités pour y ajouter des styles CSS:

• Vous pouvez coiffer le

  IFRAME lui-même.

• Vous pouvez styliser la page à l'intérieur du

  IFRAME (sous certaines conditions).

Utilisation de CSS pour styliser l'élément IFRAME

La première chose à considérer lors du style de vos iframes est le

IFRAME

• lui-même. Bien que la plupart des navigateurs incluent des iframes sans beaucoup de styles supplémentaires, il est toujours judicieux d'ajouter des styles pour les maintenir cohérents. Voici quelques styles CSS que j'inclus toujours sur mes iframes:

  marge: 0;

• rembourrage: 0;

• bordure: aucune;

• largeur: valeur ;

• la taille: valeur ;

Avec le

largeur

et

la taille

régler à la taille qui convient dans mon document. Voici des exemples de monture sans style et une avec juste les bases stylées. Comme vous pouvez le constater, ces styles suppriment la plupart du temps simplement la bordure entourant l’iframe, mais ils garantissent également que tous les navigateurs l’affichent avec les mêmes marges, bourrages et dimensions.

débordement

propriété pour supprimer les barres de défilement, mais ce n'est pas fiable. Donc, si vous souhaitez supprimer ou modifier les barres de défilement, vous devez utiliser le

défilement

attribuer aussi sur votre iframe. Pour utiliser le

défilement

attribut, ajoutez-le comme n'importe quel autre attribut, puis choisissez l'une des trois valeurs suivantes:

Oui

,

non

, ou

auto

Oui

indique au navigateur de toujours inclure les barres de défilement même si elles ne sont pas nécessaires.

non

dit de supprimer toutes les barres de défilement si nécessaire ou non.

auto

est la valeur par défaut et inclut les barres de défilement quand ils sont nécessaires et les supprime quand ils ne le sont pas. Voici comment désactiver le défilement avec

défilementattribut: scrolling = "no">
Ceci est un iframe.

Pour désactiver le défilement en HTML5, vous êtes censé utiliser le

débordement

propriété. Mais comme vous pouvez le constater dans ces exemples, cela ne fonctionne pas encore de manière fiable dans tous les navigateurs. Voici comment activer le défilement continu avec les boutons

débordementproperty: style = "overflow: scroll;">
Ceci est un iframe.

Il y a en aucune façon pour désactiver le défilement complètement avec le

débordement

propriété. De nombreux concepteurs souhaitent que leurs iframes se fondent dans l'arrière-plan de la page sur laquelle ils se trouvent, de sorte que les lecteurs ne sachent pas qu'ils sont même là. Mais vous pouvez aussi ajouter des styles pour les faire ressortir. Il est facile d'ajuster les bordures de manière à ce que l'iframe apparaisse plus facilement. Il suffit d'utiliser le

frontière

propriété de style (ou elle est liée

bordure supérieure

,

frontière droite

,

frontière gauche

, et

bas de la bordurepropriétés) pour styler les bordures: iframe {border-top: # c00 1px en pointillé;border-right: # c00 2 pixels en pointillé;border-left: # c00 2 pixels en pointillé;border-bottom: # c00 4 pixels en pointillé;}

Mais vous ne devriez pas vous arrêter avec le défilement et les bordures pour vos styles. Vous pouvez appliquer beaucoup d'autres styles CSS à votre iframe. Cet exemple utilise des styles CSS3 pour donner à l'iframe une ombre, des angles arrondis et une rotation de 20 degrés.

iframe {marge supérieure: 20px;marge inférieure: 30 px;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px # 000;-webkit-box-shadow: 4px 4px 14px # 000;box-shadow: 4px 4px 14px # 000;-moz-transform: rotation (20deg);-webkit-transform: rotation (20deg);-o-transformer: faire pivoter (20deg);-ms-transform: rotation (20deg);filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = .2);}

Styliser le contenu de l'Iframe

Styliser le contenu d'un iframe ressemble à n'importe quelle autre page Web. Mais toi doit avoir accès pour éditer la page . Si vous ne pouvez pas modifier la page (par exemple, elle se trouve sur un autre site).

Si vous pouvez modifier la page, vous pouvez ajouter une feuille de style externe ou des styles directement dans le document, comme vous le feriez avec une autre page Web de votre site.