Propriétés spécifiques, commentaires et requêtes @media

L'outil crayon fonctionne de trois manières selon que le sélecteur est un commentaire ou non, ou qu'il s'agit d'une requêtes @media.

Ajout de propriétés spécifiques

Vous pouvez placer au moyen du crayon n'importe quelle propriété css, la syntaxe n'est pas vérifiée, par exemple : les URL de polices d'une @font-face.

propriétés css spécifiques, overflow-y, overflow-x

Les propriétés saisies dans l'outil crayon complètent les autres propriétés de la feuille de styles. Mettez donc dans l'outil crayon ce que vous n'avez pas dans HTML styles.

Import d'une feuille de styles

Lorsque vous importez une feuille de styles contenant des propriétés non gérées en standard par HTML Styles, vous obtenez le message suivant :

Ignorer rejette l'import de la propriété spécifique ;
Placer l'insère dans l'outil crayon.

Commentaires

Pour insérer un commentaire, créez un sélecteur commençant par le caractère "!" : ce qui suit ce caractère n'est pas repris dans la feuille de styles.

Entrez votre commentaire, sur une ou plusieurs lignes sans vous préoccuper des balises de commentaire usuelles ( <!-- ou /*)

Effacer

Cliquez le bouton Effacer ❌ pour effacer les réglages présents.

exemple de feuille générée avec mise en gras de ce qui a été saisi dans le crayon

<style type="text/css">
<!-- Menus du site couleur de fond changée le 30/04/2023 -->
  (…)
.thumbs { width:1600px; overflow:hidden; display:list-item; overflow-y:auto; overflow-x:hidden; }
  (…)
</style>

Requêtes @media

Une requête media permet de modifier, dans le cadre d'un design « flexible », certaines propriétés pour les adapter à la largeur du media utilisé (tablette, desktop…).

Insérez un nouveau sélecteur « @media » puis cliquez sur l'outil crayon. L'écran vous permet de préciser une requête adaptée à vos besoins.
Vous entrerez les propriétés modifiées par la requête sous forme de sélecteurs placés entre les sélecteurs «@media» et «media-fin@»