[HTML][CSS] Zaokrąglenie rogów, a procentowe rozciągnięcie obiektów <div> Opcje

[WebCM]

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

[WebCM]

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 grupach

Kod

border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

W 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?