1384 sujets

Web Mobile et responsive web design

Bonjour ne sachant ou poster un FAQ je le mets ici,
Il m'aura fallu un mois pour avoir une belle colorisation enfin responsive, dans un contexte sans jquery ou autres..
J'était parti tout content sur l'article
de juliegri (02 Juillet 2009) https://www.alsacreations.com/actu/lire/745-La-colorisation-syntaxique-sur-Alsacreations.html
Puis
de jojaba (20 Août 2012) https://www.alsacreations.com/astuce/lire/1476-Prism---coloration-syntaxique.html

Génial tout à marché de suite ! sauf que en regardant sur mon tel: Huawei, horreur c'était pas responsive.

J'avais pourtant tout réalisé tel que décrit. Alors depuis ce matin cela marche sur deux de mes sites !! j'ais donc choisi de partager avec vous ces petits riens tout bétes mais qui m'ont fait tant soufrir ... vous connaissez cette frustration que nous avons toutes et tous (ou c'est mes 80 ans le coupable) , de trouver tellement c'est enfantin quelle perte de temps !
Bref voila ce que j'ai fait au final
1) Dans le Doctype j'appel le "prism.css" AVANT le css de ma page
2) étant en GRID, je ne mets dans mon "content" que:
<pre><code class="language-php">

sur les zone de ma page ou j'affiche un exemple de code.
Donc aucun DIV ou autre avant ...
3) IMPORTANT le "prism.js" après avoir fermé ma page (tout les DIV) juste avant le BODY
4) dans MON css je place juste avant et dans ?

pre, samp {overflow-wrap: anywhere;}
@media (max-width:750px){  
body, element1, element2 {width:auto;margin : 0;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%;}
pre, samp {overflow-wrap: anywhere;} /* etc... */


Voila, par contre votre avis m'intéresse au cas ou j'en ai trop mis ou mal ... bonne fin de semaine et
HOP THIS HELP
(exemple http://www.fox-infographie.com/wblog_ajax_lance_php.php )
Modifié par Jean-Pierre-Bruneau (02 Jul 2020 - 15:43)
Administrateur
Hello,

Je peux difficilement donner un avis sur ta procédure puisque Prism est responsive par défaut, sans rien toucher au code proposé de base.

En fait, toute l'astuce tient dans la déclaration "white-space: pre-wrap;" qui autorise les retours à la ligne au sein d'éléments de texte préformaté (tels que <pre> et <code>).

Prism applique cette règle par défaut, donc si ça ne fonctionnait pas c'est sans doute que ton CSS devait d'une manière ou d'une autre modifier ce comportement naturel de Prism.

J'en profite pour ressortir des vieilleries : sur Alsacréations, j'avais publié en 2011 une feuille de style de base (reset) pour le web mobile ( https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html ). On y trouve l'astuce du "white-space: pre-wrap;".

Encore une chose : la valeur "anywhere" que tu as adoptée dans ton "overflow-wrap: anywhere;" n'est malheureusement pas reconnue par Internet Explorer.
Tu peux sans aucun risque la remplacer par "overflow-wrap: break-word;" qui aura le même effet tout en étant plus compatible Smiley cligne
Modifié par Raphael (02 Jul 2020 - 15:53)
Meilleure solution
Houla !! que c'est précieux mille merci à toi,
Mais je ne partages pas tout car même leur site ne l'est pas ! au sens plein du terme taille illisible du reste bien des site ne sont pas parfait comme ce que tu obtient ici ! à savoir sur mon portable seul Alsacreation à ce que j'obtient !
Depuis que je pioche sur ce sujet ,en visitant les codes sources de beaucoup d'utilisateurs, c'est affreux ! je t'assures que leur Javascript est très gênant, bouleversant le comportement des pages.
Je corriges vite fait ."overflow-wrap: break-word;" et vais lire ton article de suite.
Encore merci. Smiley cligne