| Autor | Zpráva | ||
|---|---|---|---|
| iiic Profil |
#1 · Zasláno: 18. 9. 2012, 00:02:37
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 * |
#2 · Zasláno: 18. 9. 2012, 08:06:32
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 |
#3 · Zasláno: 18. 9. 2012, 08:23:53
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 |
#4 · Zasláno: 18. 9. 2012, 10:18:13
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 |
#5 · Zasláno: 18. 9. 2012, 10:32:10
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? |
||
|
Časová prodleva: 12 let
|
|||
0