[CSS] Visibility czy display?

0

Witam!
Która metoda ukrywania elementów strony jest bardziej kompatybilna (zalecana etc.):
-style.visibility="hidden"
-style.display="none"

Obie działają bez problemów u mnie (Firefox), ale chciałbym zachować jak największą kompatybilność z różnymi przeglądarkami tworząc kolejne elementy strony... Z góry dziękuję za opinie, sugestie.

Pozdrawiam,
Theriel

0

Bardziej visibility, ze wzgledu na semantyke - w koncu widac po wartosci i nazwie, ze do tego dokladnie zostala stworzona. display of coz tez zadziala, co nie znaczy, ze jest lepsza - sluzy tez do czego innego (stad inne wartosci).

0

imho bardziej display ;) tak mi się wydaje, ale nie jestem pewien. vis. chyba zostalo wprowadzone pozniej, no ale nie wymarzam sie.

display rozni sie od visiblity tym, ze display nie pozostawia pozostalego pobszaru, jak vis., przykladowo warstwa 200x100 w przypadku display nie zostanie po niej sladu, w przypadku vis. bedzie widoczna rozmiarem, ale zawartością już nie.

0

Aaaa, to jak zostaje puste miejsce (nie testowalem) to troche inaczej dziala niz myslalem ;) Ja tam zawsze stosowalem display (wiem, wbrew temu co napisalem wczesniej), bo nie wiedzialem ze vis. istnieje ;)

0

visibility daje jakby 100% transparentność obiektu zachwoując go na stronie i uwzględniając przy jej renderingu, display steruje renderingiem i sposobem pokazania obiektu.
display=none służy do całkowitego wyłączenia obiektu z renderu
visibility=hidden służy do uwzględnienia miejsca na obiekt ale bez jego renderingu

0

Ogólnie wygodniejsze jest display, a visibility w szczególnych przypadkach. Np. centrujesz blok za pomocą display: table/table-cell dla firefoksa, dla ie text-align i display: block; - wtedy masz w obu przeglądarkach inny display, a potrzebujesz ukryć element - i do gry wkracza visibility.

Poza takimi osobliwymi przypadkami display - nawyk, a poza tym szybciej i wygodniej pisze się none, block i display niż visibility, hidden i visible ;)

0

Sasik, do tablic uzywamy raczej display:table a nie display:block :>

0

Dzięki wielkie za odpowiedź, powiem szczerze - nie zwróciłem uwagi wcześniej na to, że visibility zostawia miejsce na obiekt... to trochę rozwiązuje dylemat ;-].

Pozdrawiam serdecznie,
Theriel

0

W sumie najlepiej całość opisał prgtw - obydwie te właściwości służą do innych celów.

Display ustawia sposób wyświetlania. Jedną z możliwych sposobów wyświetlania, jest nie wyświetlanie w ogóle. Do tego służy display: none. Wliczam w sposób wyświetlania również sposób pozycjonowania danego elementu i jego wpływu na elementy sąsiednie.

Visibility decyduje o tym, czy obiekt jest widoczny, czy nie. Jednak nie wpływa na to, jak się zachowuje reszta elementów na stronie.

W praktyce - jeśli chcesz ukryć jakiś fragment strony, to zadaj sobie pytanie, jak chcesz, by zachowała się reszta. Jeśli przykładowo "zwijasz" jakiś akapit w tekście (jakieś rozszerzenie, przypisy czy tym podobne), to najczęściej display: none jest tutaj adekwatną właściwością. Jeśli jednak chowasz na przykład jakiś element designu, fragment menu (tutaj to już różnie) czy tym podobne - często zależy nam na tym, by element był niewidoczny, ale jego pojawianie się i znikanie nie wpływało na resztę strony. W takiej sytuacji użycie display: none/jakiśtam jest niewłaściwe, czasem może wręcz doprowadzić do "rozjechania się" strony. Wówczas najlepiej użyć visibility: hidden.

Jeśli pozostawianie miejsca z jakichś powodów jest nieistotne (może zostawiać, może nie, nie wpływa to na wygląd), wówczas wydaje mi się, że visibility jest bliższe semantycznie temu, co chcemy osiągnąć poprzez ukrywanie elementu.

0

Dzięki serdeczne za odpowiedź... ja pozwolę sobie skorzystać jeszcze z tego tematu prosząc o jeszcze jedną radę:

Jak ukryć wiersz w tabelce? Chciałem zrobić:

<table>
<tr id="wiersz" style="display:none">
<td></td>
</tr>
</table>

Ale ani display:none ani visibility:hide nie chcą działać... Teoretycznie (nie sprawdzałem, pewnie będzie działać) mógłbym ukryć cała tabelkę, ale ona jest naprawdę duża, a robienie drugiej takiej samej, dla podmienienia, tylko dla jednego wiersza... chyba sami rozumiecie ;-].

Z góry dziękuję za sugestie!

Pozdrawiam,
Theriel

0

Nie wiem, co ci w tym przykładzie nie działa, mi jakoś śmiga równo. Poza tym, nie visibility: hide, tylko visibility: hidden.

1 użytkowników online, w tym zalogowanych: 0, gości: 1