28172 sujets

CSS et mise en forme, CSS3

Est-il possible de changer h3 en span via css

Bonjour,
Tout est dans le titre.
Toujours pour éviter de faire des surcharges difficile à maintenir en php dans un cms, je me demandais si c'était possible et si oui comment faire?
@+
Modifié par HDcms (16 Oct 2020 - 09:47)
Salut,

CSS sert à styliser des balises, tu ne peux pas modifier une balise en CSS !
Maintenant pour te donner une solution qui convient à ce que tu cherche à faire, on doit en savoir un peu plus:
_ pourquoi changer les h3 en span ?
_ tes balises h3 sont créées comment ? ( en dur dans un fichier, générés pas un php , etc )
Parce que tu peux le faire soit directement en php ou avec un bout de JS selon le cas.
Bonjour,
Je m'en doutais .
C'est généré par du php par un cms.
Je pourrai faire une surcharge mais après c'est difficile à maintenir.
C'est pour le référencement (ex. https://www.clibre.eu/fr/logiciels-libres )
J'ai des balises h3 qi sont générés entre h1 et h2

<h1>Logiciels libres
<h2>(Missing heading)
[b]<h3>Domaine d'application principale
<h3>Equivalent libre de
<h3>Tags[/b]
<h2>Tomboy: organisez et gérez vos notes

Modifié par HDcms (16 Oct 2020 - 10:10)
Coucou, sinon tu peux toujours changer les balises en php :


<?php $int = 10; ?>
<<?= ($int > 5) ? 'h1' : 'span'?>>Mon text</<?= ($int > 5) ? 'h1' : 'span'?>>


Ou en Javascript ??( c'est plus du bidouillage ici )


<h3 id="h3">Mon text</h3>
<span id="span"></span>




const h3 = document.getElementById('h3');
const span = document.getElementById('span');
span.style.display = "none";
let int = 10;

if(int > 5) {
    span.innerHTML = h3.innerHTML;
    span.style.display = "block";
    h3.style.display = "none";
}

Modifié par vzytoi (16 Oct 2020 - 10:23)
Dans ton cas je pense qu'en PHP ça ne fonctionnerai pas de façon optimale, le PHP ne tiens pas compte du chargement coté client, si tu surcharge ou tente de modifier le DOM, il ne sera pas forcément encore construit par le CMS, donc c'est comme un coup d'épée dans l'eau.

Maintenant en JS c'est possible de faire quelques chose de propre, mais niveau SEO je ne suis pas certain que ce soit rentable, modifier des balises à la volée en ajoutant un script ?
Pourquoi pas faire le test et voir ce que google te sort comme résultats.

vzytoi a écrit :

Ou en Javascript ??( c'est plus du bidouillage ici )

Ah mais grave Smiley lol
( ton PHP aussi d'ailleurs Smiley cligne )
stryk a écrit :
Dans ton cas je pense qu'en PHP ça ne fonctionnerai pas de façon optimale, le PHP ne tiens pas compte du chargement coté client, si tu surcharge ou tente de modifier le DOM, il ne sera pas forcément encore construit par le CMS, donc c'est comme un coup d'épée dans l'eau.

Maintenant en JS c'est possible de faire quelques chose de propre, mais niveau SEO je ne suis pas certain que ce soit rentable, modifier des balises à la volée en ajoutant un script ?
Pourquoi pas faire le test et voir ce que google te sort comme résultats.


Ah mais grave Smiley lol
( ton PHP aussi d'ailleurs Smiley cligne )


Ce qui aurait réglé le problème selon moi pour beaucoup plus simple aurait été de donner en CSS au h3 les particularités du span. Ça poserais encore sûrement un problème de CEO mais bon il faut aussi peser le pour et le contre (:
vzytoi a écrit :

Ce qui aurait réglé le problème selon moi pour beaucoup plus simple aurait été de donner en CSS au h3 les particularités du span.:


Tout à fait d'accord, mais je ne pense pas que ce soit pour un souci de style, c'est vrai que les h3 sont mal vu pour le référencement !

Sinon, pour un JS je pensais plutôt à un truc de ce style Smiley langue 


<!DOCTYPE html>
<html>
 
	<head>

		<style>
		
			h3 { background-color: red; }
			span { background-color: green; display: grid; }
		
		</style>
		
		<script>
		
			document.addEventListener('DOMContentLoaded', function(){

				// on crée la liste des h3
				const h3list = document.getElementsByTagName('h3');

				for ( let i = 0; i < h3list.length; i++ ) {

					// on crée un span vide
					const newSpan = document.createElement('span');
					// on insère le texte du h3 dans le span
					newSpan.innerText = h3list[i].innerText;
					// peut aussi insérer les id, les class, etc
					newSpan.id = h3list[i].id;
					// on ajoute le span au dom juste après le h3
					h3list[i].insertAdjacentElement('afterend', newSpan);

				}
				
				// on supprime les h3 dans le sens inverse
				for ( let i = h3list.length - 1; i >= 0; i-- ) h3list[i].remove();

			});
		
		</script>

	</head>
	
	
	<body>
	
		<span>Ceci est un span</span>
		<h3 id="un">Ceci est un h3 (enfin ça c'était avant)</h3>
		<span>Ceci est un span</span>
		<h3 id="deux">Ceci est un h3 (enfin ça c'était avant)</h3>
		<span>Ceci est un span</span>
		<h3 id="trois">Ceci est un h3 (enfin ça c'était avant)</h3>
		<span>Ceci est un span</span>
		<h3 id="quatre">Ceci est un h3 (enfin ça c'était avant)</h3>

	</body>

</html>


PS: Petit aperçu sans / avec le JS:

upload/1602845064-79129-avant.jpg

upload/1602845083-79129-apres.jpg
Modifié par stryk (16 Oct 2020 - 12:45)
Super, c'est vrai que créer un span et supprimer le h3 paraît beaucoup plus propre que de cacher le h3 et afficher le span surtout pour une liste comme ça (:
Je ne dis pas que c'est l'idéal, mais mon code à l'avantage de fonctionner Smiley lol

Quand je regarde le tiens je ne vois pas comment tu veux insérer tes span ???
Sachant que les h3 en question sont créés par un CMS ...

Enfin je te dis ça maintenant que tu en parles Smiley cligne
Modérateur
Bonjour
stryk a écrit :
Sinon, pour un JS je pensais plutôt à un truc de ce style Smiley langue [/code]
...

+1

Il me semble qu'on peut même faire un js plus court :

document.addEventListener('DOMContentLoaded', function(){

	// on crée la liste des h3
	const list = document.querySelectorAll('h3');

	for ( let k = 0; k < list.length; k++ ) {

		list[k].outerHTML = list[k].outerHTML.replace(/^<h3(.*)h3>$/sg,"<span$1span>");

	}
});

Amicalement,
parsimonhi a écrit :
Il me semble qu'on peut même faire un js plus court


C'est un clash codingame ??

document.querySelectorAll('h3').forEach(i=>i.outerHTML=i.outerHTML.replace(/^<h3(.*)h3>$/sg,'<span$1span>'));


Smiley lol Smiley lol Smiley lol

Oui effectivement je suis d'accord avec toi ^
Là c'était pour bien expliquer, avec les commentaires et tout et tout quoi Smiley smile
Modérateur
Bonjour,

Encore plus court mais peut-être plus lent :
document.body.innerHTML=document.body.innerHTML.replace(/<h3(.*?)h3>/sg,'<span$1span>');

Amicalement,
parsimonhi a écrit :
Encore plus court mais peut-être plus lent


Smiley lol Smiley lol Pas mieux pour le moment Smiley lol Smiley lol Bien joué Smiley cligne

vzytoi a écrit :
Je peux faire encore mieux mais je vais pas vous montrer


Y'a toujours plus court mon ami Smiley cligne
Modérateur
Bonjour

stryk a écrit :
...Y'a toujours plus court mon ami Smiley cligne


En effet Smiley biggrin Smiley biggrin Smiley biggrin . Encore plus court bien que carrément laid :

let b=document.body;b.innerHTML=b.innerHTML.replace(/<(\/?)h3/g,'<$1span');


Amicalement,
Modifié par parsimonhi (16 Oct 2020 - 19:45)
Bonsoir,
Je vois que vous vous êtes bien éclaté Smiley biggrin
Merci à tous. Néanmoins je me pose la question si cela change tout les h3 du site en span, cela ne va pas le faire, car je disais au début que c'était juste qq balises entre le h1 et h2 pour la hiérarchie seo, mais il va y avoir d'autres h3
Bon sinon je me rabats sur la solution que j'envisageai de surcharge en php (mais il ne fait pas que je ... l'oublie)
Bon week end
Modérateur
Bonsoir,

HDcms a écrit :
Néanmoins je me pose la question si cela change tout les h3 du site en span, cela ne va pas le faire...


On peut évidemment ne cibler que les h3 qui sont à changer. Il y aura juste un peu de code à rajouter (ce code dépend de ce qui est spécifique à ces h3).

Amicalement,
Sujet clos
Aller à