The small element have been reset by the CSS reset but no one thought to reactivate it later on:
So here’s the fix:
small {font-size:80%}Talk about it on the Twenty Eleven CSS feedback page.
What I’d like for Twenty Twelve is a dynamic syncing between frontend and backend styling. So far, styles are manually copied and pasted, it seems.
What I suggest: moving from the present style.css and editor-style.css to a future common.css, style.css and editor-style.css. Useful for child themes, when adding styles in .entry-content or below (for instance, my small fix).
common.cssstyle.css + @import(common.css)editor-style.css + @import(common.css)(the name common.css may be ill-chosen)
L’objectif était de réduire au maximum le balisage, donc de ne pas utiliser les artifices .first et .last que l’on trouve ailleurs. Merci de vous donner vos impressions.
Merci à Heyoan et à GC-nomade pour le coup de main.
Quelques remarques :
&202f; nommée espaces étroites insécable par Unicode), conformément à la typographie française soignée. Á ne pas confondre avec l’espace insécable ( ) ou l’espace fine sécable ( ).xml:lang dans les CSS, j’ai dû me rabattre sur XHTML 1.0. Et finalement, je l’ai passé en HTML5 
.ID (#dialogue), car dans la vraie vie, vous ne voudrez pas que toutes vos listes à puce se comportent comme des discussions Voyez le résultat sur une page extérieure.
Et ci-dessous le code.
<!-- 'HTML-style' HTML5 -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Dialogue de Q</title>
<style type="text/css">
#dialogue {list-style:none}
#dialogue q:lang(fr) {quotes : '«\202F' '\202F»' "“" "”" "‘" "’"}
#dialogue li:first-child q:before {content:open-quote}
#dialogue li:first-child q:after {content:no-close-quote}
#dialogue li q:before {content:no-open-quote'\2012';padding-right:0.5em}
#dialogue li q:after {content:no-close-quote}
#dialogue li:last-child q:after {content:close-quote}
</style>
</head>
<body>
<ul id="dialogue">
<li><q>Bonjour, comment allez-vous ?</q></li>
<li><q>Bonjour. Très bien, et vous ?</q></li>
<li><q>Très bien, merci.</q></li>
</ul>
</body>
</html>
According to my attempts (minimal text, empty CSS file), WordPress forces display of hyperlinks as such, even when you don’t want to. Here’s an example to prove it, a CSS that I wanted to give “as it appears in BBEdit” (whils keeping a real link):
/* http://david.latapie.name/blog/765-modifications-esthetiques */
[hreflang]:after {
background:transparent;
color:#666;
content:"\a0[" attr(hreflang)"]";
font-size:smaller;
text-decoration:none
}Here’s the code that matters: <a href="#" style="color:inherit;text-decoration:none">foo</a>
I even tried with !important (usually a bad practice), but no luck.
I challenge anyone to prevent WordPress from overriding me. And I am fully open to any plugin.
I am far from the only one to complain (this link is about HTML, not CSS, but I also experienced this with HTML). (this link is about HTML, not CSS, but I also experienced this with HTML).
D’après mes essais (texte minimal, fichier CSS vidé), WordPress force l’affichage des liens en tant que tel, même quand on ne veut pas. Exemple pour le prouver, une CSS que je voulais donner « telle qu’elle apparaît dans BBEdit » (mais en conservant un vrai lien) :
/* http://david.latapie.name/blog/765-modifications-esthetiques */
[hreflang]:after {
background:transparent;
color:#666;
content:"\a0[" attr(hreflang)"]";
font-size:smaller;
text-decoration:none
}Voici le code pertinent : <a href="#" style="color:inherit;text-decoration:none">bla</a>
J’ai même essayé avec du !important (ce qui est généralement une mauvaise pratique), rien n’y fait.
Je vous met au défi d’empêcher WordPress de penser à votre place. Et je suis preneur de tout plugin.
Je suis loin d’être le seul à m’en plaindre (ce lien traite de HTML, pas de CSS, mais j’ai aussi eu ce problème avec du HTML.
Initialement publié le 4 octobre 2006 à 10h44
body { /* pour avoir un peu de marge dans le contraste, si nécessaire */
background:rgb(250,250,250)
color:rgb(5,5,5);
/* Chiffres elzéviriens sur Lac et Windows. Chercher pour Linux */
font-family:Hoefler Text, Georgia, serif; /* aérer le texte. OK avec Hoefler et Monaco, voir avec les autres (Georgia, Courier New, Linux) */;
/* !!! vérifier ce que line-height à 1.5em donne avec Hoefler. En monaco, c’est mieux que 1.6em !!! */;
line-height:1.6em max-width:49em /* « L’idal tourne entre 50 et 80 carac. par ligne » (50+80)2=65 65 carac. 98ex 49em http://david.latapie.name/blog/1146-l-illusion-de-la-taille-de-fenetre */ }First published on April 5th 2007 at 15:43.
IMNSHO, this one is closer to the intended purpose of real control than Yahoo!’s (that I discovered thanks to Romain Gonord).
* { /* Many thanks to Laura (http://www.Espezon.org/)*/ background:inherit; border:none; color:inherit; font:inherit; margin:0; padding:0; text-indent:0; text-align:justify; text-decoration:none }BEWARE: this is not a CSS for the faint of the heart. This rules basically says: Switch to manual mode. NOW.
This CSS deactivates ANY kind of styling (well, not exactly, as it does not reset display—and I suggest no to do so if you don’t know what you are doing).
You might experience some surprises with link lists (ol, ul). In that case, change background:inherit with background:transparent.
Needless to say, this is a preliminary CSS. Once you put this as the first rule, you really should add some styling after. No CSS looks better than this CSS alone. Promised.
I take advantage of Vincent Battaglia mentioning me to notify you of a similar article: Eric Meyer did it too: Reset Reloaded. I did not have time to check the rationale behind the difference between his and mine (well, Laura’s), still.
Plusieurs billets de ce blogue utilisent des chiffres romains.
ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅺⅻ ⅬⅭⅮⅮⅯⅼⅽⅾⅿↀↁↂↃ
À partir d’aujourd’hui[1], ce ne sera plus le cas (et, quand j’aurais le temps, je modifierais rétroactivement les billets incriminés. Pourquoi ?
Parce que les chiffres romains ne sont pas des caractères, mais des glyphes.
Pour rappel, un glyphe est une forme graphique (voire sonore, tactile…), alors qu’un caractère est l’unité de sens qu’il y a derrière. Pour reprendre la terminologie de Saussure, un glyphe est un signifiant, un caractère est un signifié.
Jusqu’à aujourd’hui, je croyais que, pour les chiffres romains, ce n’était pas le cas. Que même si, sur le papier (ou la pierre), un chiffre romain est identique à la lettre latine dont il s’inspire, il s’agissait fondamentalement de deux caractères différents (le XXe siècle n’est pas le « ixixième » siècle, mais le vingtième siècle). Ceci était d’autant plus justifiable qu’un tel cas de confusion entre glyphe et caractère a des antécédents : l’alpha majuscule (Α) a généralement le même glyphe que le A majuscule (A). Lire à ce sujet B, В, β, ß.
Voici pourquoi j’ai changé d’avis :
| serif | sans-serif | cursive | fantasy | monospace | |
|---|---|---|---|---|---|
| text-top | Mme Royal | Mme Royal | Mme Royal | Mme Royal | Mme Royal |
| super | Mme Royal | Mme Royal | Mme Royal | Mme Royal | Mme Royal |
| middle | Mme Royal | Mme Royal | Mme Royal | Mme Royal | Mme Royal |
The way I understand it, the me
(short for Madame
) shall be aligned to the upper part of the M
. Chances are good that you actually see the me
in the middle (in the x-height — vertical-align:middle) of the M.
Is the font itself responsible for it (too much void in the x-height)? I doubt of it, since the problem is the same with various fonts.
Initialement publié le 26 janvier 2005 à 09:28
Les instructions ci-dessous ne réduiront pas notablement la taille de vos CSS, mais elles assainissent le code en retirant ce qui n’est pas nécessaire et en harmonisant le reste. Il y a aussi quelques astuces (X)HTML très proches de l’esprit CSS.