HTML - funkcjonalność znaczników... - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › HTML - funkcjonalność znaczników...

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 29

21. Data: 2012-01-08 02:45:44
Temat: Re: HTML - funkcjonalność znaczników...
Od: porneL <n...@p...net>

On Sat, 07 Jan 2012 17:40:44 -0000, Marek <p...@s...com> wrote:

> Dzięki, szkoda, że nadal popularny IE8 tego nie obsługoje. Koncepcja SVG
> jest bardzo interesująca. W wielu przypadkach mogłaby wyprzeć SWFy.
> Akurat z kimś poruszałem temat SVG w kontekscie braku supportu SWFów
> przez wiele
> urządzeń mobilnych. Ponoć Apple wypiął się i będzie się wypinał na SWFy.
> Czy masz jakieś informacje na temat zamiarów producentów urządzeń
> mobilnych co do obsługi SVG? Czy to jest/będzie kompatybilny format dla
> tych
> urządzeń?

iOS Safari, Opera Mobile i Firefox obsługują SVG od dawien dawna.

Android Browser *wreszcie* dodał obsługę SVG w ICS (4.0), więc
aktualizacja trafi do użytkowników tak samo szybko jak upgrade'y
IE/Windows XP... Jak tu nie kochać przeglądarek wbudowanych w OS?

--
regards, porneL

[ pokaż wiadomość z nagłówkami ]

do góry
22. Data: 2012-01-08 12:34:05
Temat: Re: HTML - funkcjonalność znaczników...
Od: Marek <p...@s...com>

Dnia Sat, 7 Jan 2012 20:52:50 +0100, Tomasz Sowa napisał(a):

> Dnia Sat, 7 Jan 2012 19:05:53 +0100, Marek napisał(a):
>
>> <h1>....
>> <p>...
>>
>> Margines wypłynie nad h1. Więc co wtedy?
>
> overflow: hidden dla kontenera który zawiera to h1

Czyli wtedy:

1. Margines powędruje nad znacznik H1 ale nie nad kontener go zawierający.
Tak? Czyli wtedy powstanie dziura nad znacznikiem H1 gdyż opuści się on o
wartość marginesu.

2. Kontener nie będzie mógł zawierać elementów pozycjonowanych absolutnie,
które wychodzą poza jego obrys.

3. Na wszelki wypadek gdybyć o borderze chiał wspomnieć, który też przerywa
collapsing. Border tworzy linie i jeśli masz tło częściowo zawarte w
kontenerze a częściowo poza nim, to powstanie Ci piękna linia przez środek
grafiki - o czym tu mówiliśmy.

Czy w związku z tym jest jakieś racjonalne uzasadnienie robienia sobie pod
górę i stosowania collapsing margins?

[ pokaż wiadomość z nagłówkami ]

do góry
23. Data: 2012-01-08 12:57:53
Temat: Re: HTML - funkcjonalność znaczników...
Od: Marek <p...@s...com>

Dnia Sun, 8 Jan 2012 13:34:05 +0100, Marek napisał(a):

>> overflow: hidden dla kontenera który zawiera to h1
>
> Czyli wtedy:
>
> 1. Margines powędruje nad znacznik H1 ale nie nad kontener go zawierający.
> Tak? Czyli wtedy powstanie dziura nad znacznikiem H1 gdyż opuści się on o
> wartość marginesu.

Sprostowanie: bzdury piszę w tym punkcie bo już zakręcony tym tematem
jestem :-)))

Chodzi o sytuację jak niżej, w której wycieka górny i dolny margines poza
kontener.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
h1 {
margin-top:20px;
margin-bottom: 10px;
}
p {
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div style="background-color:#CC0000">ten DIV jest odsunięty od następnego
gdyż 'babelkował' poza granice następnego elementu górny margines H1</div>
<div style="background-color:#009900">
<h1>to jest tytuł</h1>
<p>to jest P</p>
</div>
<div style="background-color:#CC0000">ten DIV jest odsunięty od
poprzedniego gdyż wyciekł poza granice poprzedniego dolny margines P</div>
</body>
</html>

Punkty 2 i 3 są prawdziwe.

[ pokaż wiadomość z nagłówkami ]

do góry
24. Data: 2012-01-08 13:28:17
Temat: Re: HTML - funkcjonalność znaczników...
Od: Marek <p...@s...com>

Dnia Sun, 08 Jan 2012 02:37:57 -0000, porneL napisał(a):

> Zapewne chodzi ci o kontenery:
>
> <div><div><div><h1>

Tak, już mi się wszystko miesza :-) Przepraszam.

>
>> Wtedy rozwali nam inny fragment strony a tak przynajmniej mam to zjawisko
>> lokalnym. Zdarzało mi się luż szukać przyczyny "dziwnego" odstępu mimo iż
>> nie było go zdefiniowanego w CSS/HTML. Parę znaczników dalej znalazł się
>> winowajca bo akurat redaktor CMS wprowadził <p> do treści. No i godzina z
>> dnia pracy uciekła zanim się połapałem w czym rzecz.
>
> Zapada się max 1 odstęp, więc nie musisz daleko szukać - do najbliższego
> elementu z widoczną treścią/obramowaniem.

Właśnie: z widoczną treścią - kolejny warunek do przeanalizowania. W
poniższym przykładzie kontener pomarańczowy nie ma treści i w związku z tym
margines górny od H1 przedrze się przez niego rozwalając stronę jeszcze
wyżej. To jest to o czym mówiłem i spotykałem w praktyce. Winowajca może
być daleko w kodzie. Zauważ co się dzieje. Jeśli w pomarańczowym DIVie był
jakiś tekst a klient rozmyślił się po roku czasu i webmaster usunął ten
tekst to w zupełnie innym miejscu strony pojawia się tajemnicza biała
dziura. Wtedy biedny webmaster zaczyna szukać przyczyny najpierw w miejscu
gdzie grzebał bo być może przypadkiem jakiś znacznik domykający skasował
niechcący itp. Po godzinie odkrywa, że chodzi o collapsing margins
wędrujące po całym dokumencie gdzieś z czeluści kodu. Poniższa struktura
jest trywialna. Czasem strony są dużo bardziej złożone i trzeba sprawdzić
skąd następuje to bąbelkowanie. Gdy mamy np. 5 wewnętrznych DIVów poniżej
pomarańczowego, to każdy z nich może bąbelkować kukułcze jajo w postaci
zbednego marginesu do góry dokumentu. A to z kolei oznacza kupę straconego
czasu - co niegdyś było moją bolączką aż nauczyłem się walczyć z
collapsingiem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
h1 {
margin-top:20px;
margin-bottom: 10px;
}
p {
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div style="background-color:#CC0000">ten DIV jest odsunięty od następnego
gdyż górny margines H1 'bąbelkował' poza granice dwóch DIVów</div>
<div style="background-color:#FF9900">
<div style="background-color:#009900">
<h1>to jest tytuł</h1>
<p>to jest P</p>
</div>
</div>
<div style="background-color:#CC0000">ten DIV jest odsunięty od
poprzedniego gdyż wyciekł poza granice poprzedniego dolny margines P</div>
</body>
</html>

>
>> Border transparent da Ci przejrzystą linię więc nie załatwi sprawy. Wiem,
>> że dorzucając padding a potem podsuwając marginesem można to "naprawić"
>> ale po co się tak szamotać?
>
> Żeby się szamotać od czasu do czasu, a nie z każdym odstępem i każdym
> zagnieżdżonym elementem, który powoduje zwielokrotnienie odstępu.

No i do sedna dotarliśmy. Gdyby nie collapsing to nikt nie musiałby się
szamotać nawet od czasu do czasu :-))) O tym właśnie mowa.

> I dlatego CSS załatwia za ciebie odstępy w tak dużej liczbie przypadków,
> że nawet nie zdajesz sobie z tego sprawy.
>
> Zrób sobie box model wordowy:
>
> * {margin-top:0 !important; margin-bottom:0 !important;}
>
> i używaj tylko i wyłącznie padding i border-top: transparent do robienia
> odstępów. Nic się nie zapadnie i zobaczysz, jak ci tego brakuje.

Hmm... Przyznam Ci się, że nie przypominam sobie przypadku, w którym
wykorzystywałem collapsing natomiast w każdym projekcie walczę z nim. Walka
zazwyczaj ogranicza się całe szczęści do tej części dokumentu, która
pochodzi np. z CMS. Buduję zapory aby poza tą sekcję żaden z marginesów nie
uciekł gdyż nie wiem jaki kod zostanie wstrzyknięty z CMS - to zależy od
redaktora.
Poza sekcją redakcyjną - np. systemy menu chcę mieć ścisłą kontrolę nad
odległościami miedzy elementami. Nie ma miejsca na to aby jakiś margines
wyniósł MAX(coś, coś jeszcze). Margines widoczny ma równać się konkretnej
wartości. Wtedy zazwyczaj zeruję marginesy jeśli mogę sobie na ten komfort
pozwolić, a jeśli nie - to walczę z nimi dostawiając niepotrzebne elementy
o zerowej wysokości gdy nie mogę zastosować overflow:hidden lub borderów (a
zazwyczaj nie mogę).

[ pokaż wiadomość z nagłówkami ]

do góry
25. Data: 2012-01-11 11:38:21
Temat: Re: HTML - funkcjonalność znaczników...
Od: Paweł Piskorz <n...@p...nie?>

W dniu 2012-01-06 17:57, Marek pisze:
> Zgadza się. I to też powstaje mega-problem gdyż wskutek collapsing margins
> odstęp nad znacznikiem P przechodzi nad znacznik H i opuszcza go w dół.
> Zmienia on więc swoją pozycję w zależności od treści strony pod nim.

Co się dzieje? Margines Ci wpływa na element wcześniejszy w kodzie? Daj
przykład.

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
26. Data: 2012-01-12 09:52:01
Temat: Re: HTML - funkcjonalność znaczników...
Od: Marek <p...@s...com>

Dnia Wed, 11 Jan 2012 12:38:21 +0100, Paweł Piskorz napisał(a):

> Co się dzieje? Margines Ci wpływa na element wcześniejszy w kodzie? Daj
> przykład.

No więc właśnie tak jest.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
h1 {
margin-top:20px;
margin-bottom: 10px;
}
p {
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div style="background-color:#CC0000">ten DIV jest odsunięty od następnego
gdyż 'babelkował' poza granice następnego elementu górny margines H1</div>
<div style="background-color:#009900">
<h1>to jest tytuł</h1>
<p>to jest P</p>
</div>
<div style="background-color:#CC0000">ten DIV jest odsunięty od
poprzedniego gdyż wyciekł poza granice poprzedniego dolny margines P</div>
</body>
</html>

[ pokaż wiadomość z nagłówkami ]

do góry
27. Data: 2012-01-12 14:31:41
Temat: Re: HTML - funkcjonalność znaczników...
Od: Paweł Piskorz <n...@p...nie?>

W dniu 2012-01-12 10:52, Marek pisze:
> Dnia Wed, 11 Jan 2012 12:38:21 +0100, Paweł Piskorz napisał(a):
>
>> Co się dzieje? Margines Ci wpływa na element wcześniejszy w kodzie? Daj
>> przykład.
>
> No więc właśnie tak jest.
[8<]

Z tekstu wywnioskowałem że margines dla p odsuwa Ci h1, a tak nie jest -
jeżeli usuniesz margin-top z Twojego przykładu to pozycja h1 się nie zmieni.
Coś chyba pokręciłeś :)

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry
28. Data: 2012-01-12 18:28:35
Temat: Re: HTML - funkcjonalność znaczników...
Od: Marek <p...@s...com>

Dnia Thu, 12 Jan 2012 15:31:41 +0100, Paweł Piskorz napisał(a):

> W dniu 2012-01-12 10:52, Marek pisze:
>> Dnia Wed, 11 Jan 2012 12:38:21 +0100, Paweł Piskorz napisał(a):
>>
>>> Co się dzieje? Margines Ci wpływa na element wcześniejszy w kodzie? Daj
>>> przykład.
>>
>> No więc właśnie tak jest.
> [8<]
>
> Z tekstu wywnioskowałem że margines dla p odsuwa Ci h1, a tak nie jest -
> jeżeli usuniesz margin-top z Twojego przykładu to pozycja h1 się nie zmieni.
> Coś chyba pokręciłeś :)

A tak, to już sprostowałem komuś. Dyskusja ma tyle gałązek, że przeniosłem
myślowo wątek z jednej do drugiej. Margonesy od P nie przebiją się przez H1
lecz marginesy od H1 przebijają się przez DIVy i rozwalają layout w
zupełnie innym miejscu dokumentu niż H1 występuje. Gdy mam kilka DIVów
zagnieżdżonych, to przez wszystkie margines przechodzi i zatrzymuje się
dopiero przy jakimś, w którym zastosowano "pułapkę" na radośnie fruwające
po całym dokumencie marginesy. Pułapki najczęściej w postaci bezsensownych
dodatkowych, pustych elementów o zerowej wysokości bo zazwyczaj nie można
stosować borderów czy overflow'ów.

Efekt jest na tyle trudny do zaobserwowania przy pracach projektowych, że w
wielu przypadkach uwidacznia się po tygodniach od oddania projektu. Co
gorsze - czasem zdarza się, że treść z CMS ma pojawiać się w miejscach,
kóre nie miały być do tego przeznaczone więc koder HTMLa nie zastawił
pułapek marginesowych.

Konkretny przypadek: redaktor CMS wprowadzi element wyposażony w margonesy
do treści. Chwilę potem właściciel strony dzwoni, że menu górne zniknęło ze
strony. Niby to część formatki takiej samej jak w całym serwisie jest
używana ale na tej konkretnej stronie działa ona inaczej. Faktycznie menu
nie ma... więc programista siada do pracy i stwierdza... że menu jest
generowane tylko trafia w niebyt, czarną dziurę. A co się stało? Mianowicie
margines od tego wprowadzonego elementu przelciał sobie bez skrępowania
przez parę zagnieżdżonych sekcji aż dotarł tam gdzie menu było generowane,
rozgościł się w tym miejscu wygodnie i zepchnął menu pod inny element
powodując, ze przestało być widoczne choć fizycznie kod HTML tego menu był
na stronie.

Dlatego właśnie napisałem, że collapsing margins to jedna wielka
katastrofa. Gdyby wprowadzono atrybut collapsing:kill_it to chyba byłby
najczęściej stosowanym w serwisach bardziej złożonych niż zbiór surowych
dokumentów technicznych (takich jak na W3C - choć i oni jakiś czas temu
zaczęli ubajerawiać stronę).

[ pokaż wiadomość z nagłówkami ]

do góry
29. Data: 2012-01-12 21:06:11
Temat: Re: HTML - funkcjonalność znaczników...
Od: Paweł Piskorz <n...@p...nie?>

W dniu 2012-01-12 19:28, Marek pisze:
> Margonesy od P nie przebiją się przez H1
> lecz marginesy od H1 przebijają się przez DIVy i rozwalają layout w
> zupełnie innym miejscu dokumentu niż H1 występuje.

No to jest jasne, było widoczne w przykładowym kodzie.

> Pułapki najczęściej w postaci bezsensownych
> dodatkowych, pustych elementów o zerowej wysokości bo zazwyczaj nie można
> stosować borderów czy overflow'ów.

porneL Ci sugerował również padding

> Dlatego właśnie napisałem, że collapsing margins to jedna wielka
> katastrofa. Gdyby wprowadzono atrybut collapsing:kill_it to chyba byłby
> najczęściej stosowanym w serwisach bardziej złożonych niż zbiór surowych
> dokumentów technicznych (takich jak na W3C - choć i oni jakiś czas temu
> zaczęli ubajerawiać stronę).

Gdyby wyrzucali wszystko z czym ktoś sobie nie radzi to w CSS-ie nic by
nie zostało.

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

[ pokaż wiadomość z nagłówkami ]

do góry