Autor Zpráva
iiic
Profil
Ahoj,
Rád bych udělal jakýsi debug css styl, ve kterém potřebuji mít zvýrazněné boxíky.
Problém je v tom, že když jim dám obyčejný border, tak se změní jejich velikost v dokumentu a to může hodně rozhodit pozice ostatních relativně pozicovaných kontejnerů.
Tohle není jediná změna, kterou by debug-styl měl přinést, proto bych to nejraději dělal právě v CSS. (Případně, pokud by to nešlo, tak bych přešel na jQuery, tam to vypadá docela realizovatelně.)

Tady je takový příkladek, na kterém si to zkouším:
https://gist.github.com/3740006

Nejlepší, co zatím mám je použití box-shadow, tam se nezmění velikost, problém je ale zase, že zvýraznění jde mimo objekt, chtěl bych nějak docílit toho, aby bylo v objektu a šlo přes text, tady mi jde jen o to vizuální zvýraznění, čitelnost textu tu nehraje roli.

Přesně na tohle by se měl hodit pseudo element ::outside z CSS3, ale v prohlížečích to zatím nefunguje, takže tudy asi cesta nevede.

Měli byste nějaký tip, jak na to?
margin
Profil *
Opera už sto let má v menu možnost Stránka > Styl > Orámovat strukturální prvky. Používá outline, což umí všechny prohlížeče, Explorer až od verze 8.
Aktuální verze vypadá, až na rok copyrightu, takto: http://teststranek.kvalitne.cz/opera-user-css/outline.css
V Opeře soubor najdeš, tam-kde-máš-Operu\styles\users\
Vyzkoušej a případně si uprav, třeba můžeš přidat HTML5 sémantické kontejnery (HEAD, FOOT, ...). Stal pak můžeš, třeba bookmarkletem, připojit k jakékoliv stránce v jakémkoliv prohlížeči.

iiic:
Nejlepší, co zatím mám je použití box-shadow, tam se nezmění velikost, problém je ale zase, že zvýraznění jde mimo objekt
Můžeš udělat stín dovnitř, klíčové slovo je inset, tuším, že to umí všechny prohlížeče, co umí box-shadow, ale jistý si jsem jenom u Opery a Chrome.
panther
Profil
iiic:
Případně, pokud by to nešlo, tak bych přešel na jQuery, tam to vypadá docela realizovatelně.
jQuery, neboli JavaScript... co jim chces upravovat? Pravdepodobne CSS jednotlivych prvku, ze? jQuery neni kouzelne slovicko.

Nevim, co chces v CSS debugovat, zatim jsem nic takoveho asi nepotreboval. S barvickami na pozadi elementu, ktere potrebujes „debugovat“ si nevystacis?

Dale vez, ze „//“ neni komentar v CSS.
iiic
Profil
margin:
inset to je přesně to, co jsem potřeboval... moc děkuji
outline by mi udělal zhruba to samé, co mám teď, rámečem okolo objektu. Rámeček uvnitř objektu po jeho okrajích mi příjde vhodnější.

panther:
s jQuery se dá snadno simulovat .debug::outside , tak, že si dám $('.debug').wrap('<div class="outside" />'); a vytvořený div pak nastyluji.

Nejde rozhodně o nic nezbytného, jen aby se mi lépe sledovaly změny poloh kontejnerů při změnách šířky stránky v media queries.

Že // není v css komentář vím, ale účel splní... style se neaplikuje a všem je jasné, že má jít o komentář. Vlastně jsem zvyklý na less, který tohle normálně seřere.
Chamurappi
Profil
Reaguji na iiice:
s jQuery se dá snadno simulovat .debug::outside
To bych neřekl, protože přidaný <div> ti může ovlivnit stylování potomků, na rozdíl od pseudoelementu.
Když už by do toho měl lézt JavaScript, tak by spíš měl přeměřit pozice a rozměry a napozicovat přes element nějaké vlastní zvýrazňovadlo (i když to by nebylo imunní proti změnám velikosti písma).

Že // není v css komentář vím, ale účel splní... style se neaplikuje
Následující styl se neaplikuje, nehledě na to, kde jsou hranice řádku. Je to rozbitý selektor. Proč by mělo být všem jasné, že je to komentář, když nemá parametry řádkového komentáře?

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: