Ignorer les espaces en HTML
Existe-t-il quelque chose dans HTML/CSS qui indique au navigateur d’ignorer complètement les espaces?
Tant de fois que vous voulez placer, disons, deux images l'une à côté de l'autre - vous essayez désespérément de garder le code HTML lisible, mais le navigateur place un espace entre elles.
Donc au lieu de quelque chose comme ça:
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
vous vous retrouvez avec ça
<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />
Ce qui est tellement horrible!
Oh, vous pouvez très facilement accomplir cela avec ne seule ligne de CSS :
#parent_of_imgs { white-space-collapse: discard; }
Inconvénient, vous demandez? Aucun navigateur n'a implémenté cette fonctionnalité extrêmement utile (pensez aux blocs en-ligne en général). :-(
Ce que j’ai fait de temps en temps, même si c’est moche car la nuit est sombre, c’est utiliser des commentaires:
<p><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--></p>
vous pouvez définir le font-size du conteneur à 0 et le white-space disparaît!
Les navigateurs ignorent les espaces dans la plupart des cas quand ils se trouvent à côté d'un élément de bloc.
Le problème avec les images (dans ce cas) est qu’il s’agit d’éléments en ligne. Par conséquent, même si vous les écrivez sur des lignes séparées, il s’agit en fait d’éléments situés sur la même ligne, séparés par un espace (le saut de ligne étant considéré comme un espace). Il serait incorrect que le navigateur supprime les espaces entre les images; l'écriture des balises d'image avec des sauts de ligne entre elles devrait être traitée de la même manière que l'écriture des balises d'image sur la même ligne avec des espaces entre elles.
Vous pouvez utiliser CSS pour que les images bloquent les éléments et les flottent les uns à côté des autres, ce qui résout de nombreux problèmes d'espacement, à la fois d'espacement entre les images et d'espacement sur la ligne de texte située sous les images.
Malheureusement, les nouvelles lignes comptent comme des espaces.
La meilleure solution que j'ai trouvée consiste à utiliser les espaces à l'intérieur des tags eux-mêmes, à la place de l'extérieur:
<img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />
Ce n'est pas idéal non plus, je sais. Mais au moins ce n’est pas un bidouillage CSS bizarre qui s’appuie sur la taille du caractère d’un espace, son positionnement relatif ou JavaScript. :)
La solution la plus récente consiste à utiliser display: flex sur un conteneur extérieur, vous pouvez essayer ceci avec l'exemple suivant:
(Et oui, Flexbox est de plus en plus pris en charge: http://caniuse.com/#search=flexbox )
HTML:
<!-- Disregard spaces between inline-block elements? -->
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
[~ # ~] css [~ # ~]
.box {
display: flex;
display: -webkit-flex;
}
span {
display: inline-block;
width: 30px;
height: 30px;
background-color: #fcf;
border: 2px solid #f9f;
}
Mise à jour: De plus, si vous souhaitez que vos éléments soient renvoyés à la ligne (comme le font les éléments inline-block standard), n'oubliez pas d'ajouter flex-wrap: wrap à votre conteneur flexbox.
<style>
img {
display: table-cell
}
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...
D'accord, j'ai peut-être de la chance car je n'ai plus qu'à m'inquiéter de faire fonctionner ceci dans webkit (plus précisément celui intégré à QT), de sorte qu'il fonctionne dans Chrome et Safari également. Semble display: table-cell présente tous les avantages de l'affichage: inline-block, mais sans les inconvénients des espaces (pensez aux td en retrait)
En quoi cette solution était-elle si difficile?
css
.no-whitespace {
line-height: 0;
font-size: 0;
}
html
<span class="no-whitespace">
<a href=# title='image 1'>
<img src='/img/img1.jpg' alt='img1'/>
</a>
<a href=# title='image 2'>
<img src='/img/img2.jpg' alt='img2'/>
</a>
<a href=# title='image 3'>
<img src='/img/img3.jpg' alt='img3'/>
</a>
</span>
Les images sont des éléments en ligne par défaut, c’est pourquoi vous voyez des espaces entre eux. Si vous écoutez votre exemple sur un lecteur d'écran, vous savez immédiatement pourquoi: sans espace, vous entendez:
ma mini truc ma mini truc ma petite chose ma petite chose
Alors, utilisez my mini thing. (points plus espaces à la fin) sous forme de texte alternatif ou Poussez les images avec CSS ensemble. Ne supprimez pas simplement les espaces dans le code.
Si vous utilisez php , cela fonctionne à merveille. J'ai trouvé la solution ici .
À l'origine, je cherchais quelque chose pour supprimer les nœuds de texte constitués de seulement whitespace après l'analyse html avec quelque chose comme simplexml , mais c'est beaucoup moins cher.
<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
<img src='./mlp.png'/>
<img src='./dbz.png'/>
<img src='./b10af.png'/>
<img src='./fma.png'/>
<?ob_end_flush;?>
C'est une question simple et la réponse n'est pas si simple.
On peut essayer d'éviter les espaces dans le code source qui ne sont pas toujours réalisables dans le CMS, car ils y sont automatiquement insérés par le système. Si vous voulez changer cela, vous devez creuser profondément le code principal du CMS.
Ensuite, vous pouvez essayer d'utiliser des images laissées flottantes. Mais c'est dangereux. Au début, vous n'avez pas vraiment de contrôle sur l'alignement vertical par définition. Et deuxièmement, vous rencontrez un chaos total si vous avez tellement d'éléments flottants qu'ils s'étendent sur plus d'une ligne. Et si vous avez une mise en page reposant sur des éléments flottants à gauche (la plupart d’entre eux le font aujourd’hui), vous pouvez même casser certains styles flottants externes si vous supprimez les éléments flottants après les images. Cela peut être annulé si vous faites flotter un élément environnant. Plutôt ne pas être recommandé.
La seule solution serait donc une déclaration CSS qui gère le processus de traitement des espaces. Cela ne fait partie d'aucune norme (car CSS 3 n'est pas encore terminé).
Je préfère les espaces blancs dans la variante HTML. Avec drupal en tant que système de gestion de contenu, ceci peut être réalisé assez facilement dans vos fichiers template.php et theming. Ensuite, je choisis inline-block.
P.S .: inline-block est assez compliqué à obtenir dans les différents navigateurs. Pour FF 2, vous devez afficher: -moz-inline-box. Le reste et IE8 peuvent avoir display: inline-block juste après. Et pour lte IE 7, vous devez afficher: inline dans une déclaration distincte suivante (de préférence via des commentaires conditionnels).
modifier
Ce que j'utilise pour faire un élément inline-block
elem.inline {
display: -moz-inline-box; /* FF2 */
display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * + html hack for IE 7 */
* + html elem.inline {
display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
Essayez ce CSS:
img { display: table-cell; }
Minify votre HTML!
Il est recommandé de minimiser la réponse avant que elle soit restituée au navigateur.
Donc, à moins que vous n'ayez besoin de cet espace (et que vous l’ayez codé en dur en utilisant ), vous supprimez toujours les espaces dans le processus de minification.