Úpravy CSS Abíčka

5.8.2005 08:58 | Přečteno: 1326× | Abc

Zajímavé asi jen pro ty, kdo používají svůj vlastní CSS... Během posledních pár dnů jsem provedl do obou oficiálních stylů (výchozího světlého i alternativního tmavého) několik úprav, které by vám mohly narušovat vzhled stránek, pokud své styly nepřizpůsobíte.

Jde především o změny v nadpisech (které byly až doposud zobrazovány mírně chaoticky) a o změnu způsobu zobrazování sloupečkových výsledků anket (na návrh Yetiho).

Nadpisům (h1, h2, h3) jsem trošku poupravil odsazení nahoře i dole a přizpůsobil jsem tomu i odsazení odstavců (p). V šabloně to nedoprovázejí žádné změny, takže by to potíže působit nemělo, i kdybyste věci ponechali při starém. Ale ke změně došlo v kódu, který zobrazuje "Související články" a "Odkazy a zdroje" na konci článků. Když nahlédnete do zdrojáku kteréhokoliv článku, hned změny uvidíte (místo h1 je používán h3). Proto doporučuji okopírovat z ofic. stylu definici h3.

Ankety byly až do včerejšího večera zobrazovány pomocí tenkého obrázku, kterému byla šířka určována podle procentuálního podílu dané odpovědi/volby. Yeti však navrhl, aby se "sloupečky" řešily pomocí CSS a HTML, aby si je každý mohl nastylovat podle sebe. Já jsem se tím při vytváření tmavého stylu nezabýval (na rozdíl třeba od možnosti použít alternativní logo), protože ten modrý obrázek, kterým byly sloupečky tvořeny, mi pasoval jak do světlého, tak do tmavého stylu. Je však pravda, že čím více věcí lze individuálně nastylovat, tím lépe. A proto jsem vzal kód, který Yeti navrhl (díky), a s drobnými úpravami (většinou úlitby pohanským bohům a IE) jsem ho nasadil. V CSS to snadno najdete, když vyhledáte "ank".

Další na řadě bude barevné zvýrazňování syntaxe, které začal ve svém seriálu používat Yeti (Rukověť baliče RPM). V tmavém stylu se ty barvy blíží nečitelnosti, a proto bude nutné vymyslet způsob, jak to "zuniverzálnit".

       

Komentáře

[Filip Jirsák]

Napadají mne jen dva způsoby zvýrazňování syntaxe - buď celý rámeček se zdrojákem (tedy <pre class="kod">) mít se světlým pozadím i ve tmavém stylu, nebo se inspirovat nějakým IDE (třeba jEdit), a vytvořit styly např. .kw_comment1, .kw_comment2, .kw_digit, .kw_function atd. Ty nechť si pak každý ostyluje dle své chuti a přesvědčení. Přičemž pro tmavé styly bude třeba vytvořit ještě alternativu pro tisk.

Nakonec bych byl ale pro výpis zdrojáků na světlém podkladu - IMHO zvýraznění syntaxe na tmavém podkladu není rozumně možné, protože barev, které jsou čitelné na tmavém pozadí, a dají se rozlišit, není podle mne mnoho.

[unchallenger]

Z mého pohledu je zuniverzálnění jednoduché.

Vim má zvýrazňování syntaxe pro všechno. Všichni normální lidi dokáží použít vim. Takže se upraví 2html skript ve vimu, aby negeneroval náhodně pojmenované třídy CSS (poznámka: ačkoli 2html umí generovat výpisy kódu s třídami namísto font elementů (což jsem BTW kdysi dopsal já ;-) nepoužil jsem to v seriálu, protože to tehdy použít nešlo), ale psal do class standardní vimí jména zvýrazňování (což by snad mělo jít):

Comment

Constant

Identifier

Statement

PreProc

Type

Special

případně další (Todo, ...)

a ty se nadefinují v CSS Ábíčka.

[unchallenger]

Zpět, v nových verzích vimu už to 2html dělá, takže postačí:

1. Používat ke generování zvýrazněné syntaxe 2html.vim (lze ho případně obalit skriptem pro lidi, co mají k vimu nepřekonatelný odpor).

2. Nadefinovat výše zmíněné třídy v CSS Ábíčka.

[unchallenger]

#!/bin/bash
vim -R -e -s "$@" <<'EOF'
:syn on
:let use_xhtml=1
:let html_use_css=1
:unlet html_no_pre
:run syntax/2html.vim
:1,/<pre>/-1d
:/<\/pre>/+1,$d
:w!
:qa
EOF

[Robert Krátký]

Hlavní potíž nevidím ani tak v tom, jak to řešit v rámci CSS. Samozřejmě, že ten skriptík by mi pomohl, protože nepatřím mezi normální lidi , ale tak jako tak je největší překážkou praktická otázka barev.

Jak už zmínil někdo v prvním komentáři, je těžké najít barvy, které by byly dobře čitelné na tmavém pozadí. Kdyby nebylo tohoto problému, byl bych už to zavedl - na staré díly seriálu by stačil jednoduchý search & replace. Varianta světlého pozadí v jinak tmavém stylu se mi nelíbí (nehledě na to, že to není řešení).

[unchallenger]

V čem je problém? Když se nenajdou, tak se v tmavém stylu nadefinují třídy méně odvážně. Vim taky na černobílém terminálu, který umí nanejvýš tučné písmo, udělá jen tučné Statement a Type...

[Robert Krátký]

Tak to mě nenapadlo. Vůbec jsem neuvažoval o tom, že bychom mohli jeden styl nějak "ošidit". Ale máš pravdu, je to jednoduché a rozumné řešení. Udělám to asi tak.

[unchallenger]

BTW na vim.org je spousta tmavých barevných schémat, která samozřejmě definují barvy pro všechny třídy. Divil bych se, kdyby mezi nimi nebylo nějaké modré, které se hodí k tmavému stylu.

[unchallenger]

Když už na ně opět došlo: Z používání H1 na Ábíčku asi porodím ježky... Není možné se držet invariantu právě jednoho H1 na stránku? Výjimky by snad dávaly smysl u stránek, které vypadají jako seznamy nadpisů (bez nadpisu toho seznamu), ale články a pod. by měly mít jeden H1: svůj nadpis.

[Robert Krátký]

Není možné se držet invariantu právě jednoho H1 na stránku?

Ale proč? Čemu to vadí? Předpokládám, že máš na mysli třeba články, kde jsou jednotlivé "kapitoly" nadepsány právě pomocí h1. Nerozumím tomu, proč ti to působí takovou bolest (a chudáci ježci...).

[unchallenger]

Dají se o tom vygooglit spousty textu... Základ je, že už podle specifikace HTML je H1 významnější nadpis než H2 (a ten než H3 atd.). Takže např.:

When you introduce the second H1, are you saying "Ignore the first H1, this one is the real starting point" or are you saying "These two sections are equally important" ?

If they are 'equally important', and we can't have two starting points to the document, then they have to be H2's under a H1 that describes the content of the total document.

Zkus se podívat na ABC Linuxu něčím jako ,Show table of contents` v Amaya -- vypadá dost nelogicky, takže to degraduje i přístupnost (accessibility).

Další věc je SEO...

[Robert Krátký]

Tedy, ignorantsky se přiznávám, že kdybys na konci nezmínil i SEO, nepovažoval bych ty výše uvedené důvody za nějak moc důležité. Ale co... nic nám nebrání začít se aspoň od nynějška chovat zase trochu více podle pravidel. Začnu se tím při přípravě článků řídit.