Forum PHP.pl

Niektóre elementy <div> (np. kontener na newsy, menu) mają zaokrąglone rogi. Popatrzmy na przykład:

[HTML] pobierz, plaintext 
<div class="naglowek">
  <span class="lewy_naroznik"></span>
  Jakiś tam tytuł
  <span class="prawy_naroznik"></span>
</div>
 
<div class="wlasciwa_czesc_divu">
  <p>Jakiś tam bardzo długi tekst - news, artykuł lub cokolwiek</p>
</div>
 
<div class="zakonczenie_boksu"></div>
[HTML] pobierz, plaintext 

W powyższym przykładzie nagłówek składa się z 3 części: lewego narożnika, środka i prawego narożnika. Takie rozwiązanie pozwala na zastosowanie długości procentowej - można dowolnie rozciągnąć nagłówek. Niestety, kod HTML zajmuje więcej miejsca i nie jest uniwersalny.

Popatrzmy jeszcze na stopkę - zakończenie boksu. W przykładzie może ona mieć tylko stałą szerokość. Ustalenie procentowej zawartości spowoduje deformację, bo 1 plik graficzny zawiera już narożniki.

Poszukuję takiego rozwiązania, aby dało się dowolnie rozszerzać nagłówek i stopkę, ale nie wymagało to nadmiaru kodu. Najlepiej, by wystarczył jeden wpis:

[HTML] pobierz, plaintext 
<div class="naglowek_zaokraglony">Tytuł</div>
[HTML] pobierz, plaintext 

Jest to w ogóle możliwe? CSS 3 raczej odpada, bo nie wszystkie przeglądarki wspierają.

Co jest lepsze dla użytkownika?

1) Szerokość dostosowana do szerokości przeglądarki
2) Stała szerokość - ale trzeba wybrać 1024x768 albo wyższą

Ten post edytował WebCM 9.08.2010, 20:00:56

Najlepszym rozwiązaniem jest zastosowanie CSS3. Przeglądarki, które tego nie obsługują będą miały gorszy efekt, trudno. Czas w końcu zmienić przeglądarkę. Userzy którzy tego nie robią będą nadal mieli pełen dostęp do treści, lecz w gorszej jakościowo oprawie.

Ewentualnie dla tych "opóźnionych" można załadować skrypt typu:
https://code.google.com/p/mushpup/source/br...query.corner.js

Są 3 wyjścia:

1) Strona o stałej szerokości, zaś nagłówek można opisać za pomocą tagu <h1>, np.

[HTML] pobierz, plaintext 
<h1>Nagłówek</h1>
[HTML] pobierz, plaintext 

W stylach ustawiamy obrazek tła, którym jest nagłówek o stałej szerokości.

Zalety:
+ brak nadmiarowych znaczników
+ proste i efektywne rozwiązanie problemu narożników

Wady:
- strona niedopasowana do ekranu
- przy zmianie szerokości nagłówków trzeba zmieniać plik
- jeżeli mamy nagłówki o różnej szerokości, wymagają osobnych plików tła

2) Strona o zmiennej szerokości, ale trzeba uwzględnić w kodzie HTML zaokrąglenia nagłówków:

[HTML] pobierz, plaintext 
<h1>
   <span class="lewy"></span>
   Jakiś nagłówek
   <span class="prawy"></span>
</h1>
[HTML] pobierz, plaintext 

W pliku tła są wydzielone 2 narożniki oraz gradient. Arkusz CSS wybiera właściwy element z pliku za pomocą background-position. Pozostaje pytanie, czy to uniwersalne rozwiązanie.

Zalety:
+ narożniki powinny wyświetlić się w każdej przeglądarce
+ stronę można dostosować do szerokości ekranu
+ pliki tła nagłówków nie mają z góry określonej szerokości

Wady:
- nadmiarowy kod
- pozostaje pytanie, czy to zgodne z semantyką

3) Zaokrąglenia CSS 3 - rozwiązanie zaproponował porneL na grupachW HTML-u wystarczy tylko <h1> albo <div class="naglowek"> w zależności, gdzie umieszczamy nagłówek.

Zalety:
+ elastyczne zaokrąglenia, które łatwo zmodyfikować w CSS
+ nie ma potrzeby tworzyć plików graficznych z zaokrągleniami
+ stosujemy nowe możliwości przeglądarek
+ brak nadmiarowego kodu HTML

Wady:
- funkcja wciąż eksperymentalna w Firefoksie i Chrome (tzn. trzeba stosować prefiksy)
- nadmiarowy kod w CSS (ze względu na prefiksy)
- starsze przeglądarki nie wyświetlą zaokrągleń (nawet IE 8)

Nie zbadałem użycia pamięci oraz płynności przewijania, jeśli jest dużo zaokrągleń CSS 3.

Który przykład najlepszy?

W powyższych przykładach <h1> oznacza nagłówek główny - zazwyczaj występuje tylko raz. Ma to korzystny wpływ na pozycjonowanie (?), a poza tym robotom łatwiej zbudować logiczną strukturę dokumentu (gdy jeszcze są <h2>, <h3>).

Tu pojawia się kolejne pytanie - czy znacznik <h1> powinien już mieć wszystkie style nagłówków z zaokrągleniami, czy być dzieckiem nadrzędnego znacznika <div> opisującego nagłówek?

[HTML] pobierz, plaintext 
<h1>Nagłówek</h1>
 
<!-- ALBO -->
 
<div class="naglowek"><h1>Naglowek</h1></div>
[HTML] pobierz, plaintext 

Wcześniej stosowałem pierwszy wariant. Mniej kodu, ale co o tym myślicie? Czy to nie ogranicza możliwości zastosowania innych stylów dla niektórych nagłówków lub użycia <h1> w innym miejscu?

3. IE i tak powiedziało, że nie wprowadzi CSS3 do swojej przeglądarki ... wiadomo dlaczego ... Mimo to ten sposób będzie najlepszy.

Podaj źródło. Jeżeli IE 9 nie dostosuje się do standardów, nie ułatwi życia twórcom i internautom i nie wprowadzi CSS 3, organizuję manifestację przed polską siedzibą Microsoftu

Też jestem za sposobem nr 3, ale jeżeli miałbym wybierać spośród 2 poprzednich - który lepszy i dlaczego?

Nie prawda. Nie to zebym byl zwolennikiem IE, ale zainstaluj sobie IE9 Preview 4. Niebawem inne przegladarki beda mialy problemy z utrzymaniem "wladzy".

http://samples.msdn.microsoft.com/ietestcenter/
To co tu podaja to wszystko prawda.
Dodatkowo 95 punktow w ACID3 (w wersji finalnej bedzie zapewne 100) oraz IE szybszy od FF w Sunspider (prawie tyle co Chrome).

--------

Jezeli chodzi o zaokraglanie rogow to wystarczy:
border-radius oraz -moz-border-radius
i we wszystkich przegladarkach w najnowszych wersjach (konqueror, safari, chrome, opera, firefox) oraz niebawem w IE9 dziala.


W Chrome 5, Safari 5 juz nie jest eksperymentalna.

Ten post edytował kufalo 12.08.2010, 10:29:50

http://css3pie.com/
WebCM, powyższa biblioteka powinna Cię zainteresować :-) Masz tam border-radius z CSS3 + hack dla IE6-IE8. Nic dodać nic ująć, moim zdaniem. Choć ja i tak nie dodawałbym wcale obsługi zaokrągleń do IE, niech cierpią