Avec une feuille de style print.css, j'avais un souci: le fond d'une div d'info ne s'imprimait pas alors que j'y avais mis un joli bronco...
ben en fait, il semblerait qu'on puisse forcer l'impression d'une image passée en background:
.madiv{
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
Si ça peut aider...
Dans mon appli de documents, je voulais accentuer le document survolé dans la liste et diminuer les autres li. Ben ça se fait en ... un sélecteur CSS !
body:has(li:hover) li:not(:hover){
opacity:0.5;
transition: opacity 500ms;
}Les li non survolés alors qu'un li est survolé sur la page deviennent transparents à 50% mais si on ne survole aucun li, l'aspect est normal...
Je n'ai pas forcément compris toutes les explications mais l'article est vraiment intéressant.
J'imagine qu'il me faudrait réfléchir pour remplacer mon usage des media queries façon patch à la pelle de chantier des trucs qui foirent quand on change la taille du viewport... si je pouvais me passer des breakpoints...
Mais bon, j'ai déjà bossé à un refacto du css de mon appli de documents/exercices pour les élèves en modernisant le code à coups de nesting et de variables pour les couleurs... résultat, certains navigateurs au collège affichent de la merde parce qu'ils ne sont pas mis à jour 
Je ne sais pas pour vous amis codeurs, mais de mon côté, si je n'ai pas un problème concret pour intégrer des nouveautés,impossible de les comprendre vraiment...
Je me note quelques astuces intéressantes. Toutefois, une remarque en passant... ARRÊTEZ DE FAIRE DES VIDÉOS DE PROGRAMMATION... à quoi ça rime ? on ne peut pas faire de copier coller, pas de récup auto de snippets, pas de tests... à part faire grimper votre popularité sur les raizosocio... pfff.
Oui, je sais qu'en description il a mis les snippets : mais il pouvait les inclures dans une page de blog, non ? Ou alors plus personne ne sait lire à part moi et on ne m'a rien dit ?!
L'astuce consiste à utiliser des pseudo éléments héritant du background de la div et à les blur.
.gradient-shadow {
background: linear-gradient(
45deg,
hsl(var(--clr-orange)),
hsl(var(--clr-blue))
);
position: relative;
isolation: isolate;
}
.gradient-shadow::before,
.gradient-shadow::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: inherit;
/* border: 10px dotted white; */
}
.gradient-shadow::before {
filter: blur(0.75em);
}
.gradient-shadow::after {
opacity: 0.5;
filter: blur(2em);
}En gros, le navigateur essaie de couper le texte de façon plus homogène
// pour les titres (peu de lignes)
h1{ text-wrap: balance;}
// pour les paragraphes etc (beaucoup de lignes): pas d'orphelin sur la dernière ligne
p{text-wrap:pretty;}Je me note quelques astuces à tester ou retenir :
/* empêcher les navigateurs mobiles d'ajuster la taille du texte */
-webkit-text-size-adjust: none;
text-size-adjust: none;/* le body prend tout le viewport */
html{ block-size: 100%; }
body{ min-block-size: 100%; }/* empêcher les medias de déborder */
img,
iframe,
audio,
video,
canvas {
display: block;
max-inline-size: 100%;
block-size: auto;
}
svg {
max-inline-size: 100%;
}/* overflow horizontal */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}/* rendre le disabled plus visible */
:disabled {
opacity: 0.8;
cursor: not-allowed;
}Donc on PEUT styler les boutons radio sans casser l'accessibilité ni recourir à des libs ou frameworks hippopotamesques.
Hop, dans mon snippetvamp.
La lecture de l'article est intéressante.
input[type="radio"] {
/* Disable the browser's default radio button styles */
appearance: none;
margin: 0;
/ Recreate the circle container /
border: 1px solid black;
background: white;
border-radius: 50%;
/ Center our dot in the container /
display: inline-grid;
place-content: center;
/ Use a pseudo-element to display our "dot" /
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/ And display it when the radio button is checked /
&:checked::before {
background: black;
}
}
Résume :
Amen.
(oui, l'image de titre est bien un troll 
)
Pour toute personne voulant faire des plugins pour pluXML, j'ai mis à jour mon générateur de plugin: pour rappel, il sert à créer tous les fichiers et sous-dossiers préconfigurés selon vos choix.
Je ne m'étends pas plus, vu que je dois être le seul à utiliser ça, mais bon.
Au cas où,
Deuxième épisode de mes notes perso sur la bibliothèque Image magic pour évoquer la classe ImagickDraw qui, comme son nom l'indique, permet de dessiner avec Imagick. ( 1er épisode )
On va se limiter à des usages basiques parce que la lecture du sommaire suffit à imaginer des possibilités certes alléchantes mais totalement hors de propos en ce qui me concerne (courbes de bézier etc)
Spoiler: c'est nettement moins intuitif et simple que pour le traitement d'image... l'écart entre Imagick et GD dans le domaine du tracé n'est plus si évident: ça mériterait de faire un classe pour simplifier tout ça... ( /me se jette sur son bujo pour griffonner spasmodiquement)
Cette classe crée un objet servant d'instructions à appliquer ensuite à un objet Imagick.
On partira du principe que vous avez fait des instances des classes comme suit:
$im=new Imagick(); # l'image dans laquelle vous allez appliquer l'objet ImagickDraw
$draw=new ImagickDraw();$draw->setFont(fonte); : sélectionne la fonte à utiliser$draw->setFontSize(taille); : définit la taille en pixels$draw->setFillColor(couleur);: définit la couleur de fond (normalement, couleur est un objet ImagickPixel, voir 1er épisode mais on peut passer une chaîne au format de couleur CSS )$draw->setTextAlignment(alignement); : une des constantes d'alignement imagick::ALIGN_LEFT imagick::ALIGN_CENTER Imagick::ALIGN_RIGHT$draw->setGravity(Imagick::GRAVITY_CENTER); centre le texte dans sa boîte (horizontal et vertical) $draw->setTextDecoration(decoration): une des constantes de décoration imagick::DECORATION_UNDERLINE imagick::DECORATION_OVERLINE imagick::DECORATION_LINETROUGH et bien d'autres (comme du... bruit ?!).$draw->setTextAntialias(true);: ajouter de l'antialias$draw->setTextInterwordSpacing(taille)$draw->setTextInterlineSpacing(taille)$draw->annotation(x,y,texte) : trace un texte dans la police sélectionnée$im->annotateImage( $draw, 0, 0, 0, $fontName ); : ajoute le texte à l'image.$im->queryFonts($pattern = "*") 🆒 on peut filtrer avec une pattern à la façon de glob().$im->queryFontMetrics($draw, text); on récupère un tableau comme ci-dessous
Array
(
[characterWidth] => 9
[characterHeight] => 9
[ascender] => 9 # la taille au-dessus de la baseline
[descender] => -2 # la taille sous la baseline
[textWidth] => 71
[textHeight] => 10
[maxHorizontalAdvance] => 12
[boundingBox] => Array
(
[x1] => 0
[y1] => -2
[x2] => 6.890625
[y2] => 7
)
[originX] => 70
[originY] => 0
)
$draw->setStrokeOpacity(0-1);$draw->setStrokeColor(couleur);$draw->setStrokewidth(nb);$draw->setStrokeDashArray() Le motif semble être plein de possibilités car on peut le définir très spécifiquement et même utiliser une image comme motif (->setStrokePatternURL)$draw->setFillColor(couleur);$draw->circle ($x, $y, $x + $r, $y);$draw->ellipse($ox,$oy,$rx,$ry,$start,$end);$draw->point ($x, $y);$draw->polygon ($tableau_de_coordonnées); : array( 'x' => 3, 'y' => 4 ), array( 'x' => 2, 'y' => 6 ) $draw->polyline ($tableau_de_coordonnées); : array( 'x' => 3, 'y' => 4 ), array( 'x' => 2, 'y' => 6 ) $draw->rectangle ($x, $y, $x2, $y2);
) $draw->roundRectangle ($x, $y, $x2, $y2,$rayonx,$rayony);Pour écrire un texte dans une image:
$text='pipo et mollo';
$im=new Imagick();
$draw=new ImagickDraw();
//var_dump($im->queryFonts('*'));exit;
$draw->setFont( 'Courier' );
$draw->setFontSize( 20 );
$draw->setFillColor( 'black' );
$draw->setTextAntialias(true);
$metrics = $im->queryFontMetrics($draw, $text);
$draw->annotation(0,$metrics['ascender'],$text);
$im->newImage( 300, 20, 'lightblue');
$im->drawImage($draw);
$im->setImageFormat( 'png' );
header('Content-type: image/jpeg');
exit($im);
Il serait intéressant de pousser les tests mais là, j'ai pas le temps...
Peut-être reprendrais-je des trucs existant avec tout ça ( scriptopic, RoR, Stamp mematic etc etc.)
Si toi aussi t'en as marre que le bouton onclick du bouton en «article_preview»... et ça, tu vois, ça change tout...
Désormais, la visualisation de l'article se fera toujours dans le même onglet (ouvert lors de la première visualisation)
Un truc qui me chiffonnait dans la rédaction d'articles un peu longs, c'était:
Grâce à ce plugin, on ne passe plus son temps à défiler QUE dans la page 
En effet, il redimensionne les textareas de la page article en fonction de leur contenu. La zone de texte grandit avec le volume de texte tapé dedans.
Un plugin dérivé d'un de mes anciens qui s'avérait obsolète avec la nouvelle maquette. Il permet d'afficher un menu visible uniquement quand l'admin est connecté. Ce menu regroupe plusieurs icônes:
Il affiche de plus un lien sur chaque article pour éditer directement ce dernier (pratique pour corriger ou mettre à jour un article)
Ces deux fonctions sont accessibles via deux hooks, «editArticleIcon» et «adminPanel», dont il faut placer l'appel dans les pages header.php et articles.php du thème
Une page de config permet de redéfinir les icônes et texte des boutons ainsi que le tag du raccourci.
Si ça peut vous servir, c'est cadeau !
Tester des langages de programmation en direct: une alternative. Je mets de côté (wink Erase )
Je viens de procéder à une mise à jour de pluXml plugin starter:
Quand STARTPAGE se met à utiliser un content-encoding en gzip sans prévenir, ça fait cafouiller Googol qui n'y retrouve plus ses petits regexes.
Heureusement, en ajoutant
curl_setopt($ch,CURLOPT_ENCODING , "gzip");dans la méthode de curl, on répare tout...
ouf.
Styler les inputs radio/checkboxes de façon sémantique, accessible, moderne, customisable et vanilla, c'est possible !
Avec un mélange de variables css et appearance.
Superbe travail en effet: concevoir un shader pour compenser les irrégularités de luminosité d'une télé vieillissante. Je suis fan du principe et pour une fois que le fait que les télés soient devenus des ordinateurs peut-être utile au lieu d'emmerdant...
