Wiosenne porządki (wygląd)
sobota, 14 marca 2009
O wyglądzie strony słów kilka
Laptop naprawiony.. większość danych odzyskana.. jest weekend i wreszcie znalazłem chwilę na to by napisać małe co nieco.
Wygląd tej strony jest efektem eksperymentów z przeglądarkami i najnowszymi standardami. Mam nadzieję że z czasem dopracuję to co zacząłem i będzie to strona którą można się pochwalić.
Jednak, co najważniejsze, efektem ubocznym, korzystania z najnowszych rozwiązań jest to że nie istnieją dwie przeglądarki, które w ten sam sposób pokazywały by tą stronę.
To dobry pretekst by napisać tekst o kilku atrakcyjnych rozwiązaniach z okolic CSS3.
Zacznę jednak od dwóch istotnych pytań:
- Czy strona musi wyglądać jednakowo na każdej przeglądarce?
Nie!
- Takie coś nie istnieje, to fikcja. Ludzie różnie postrzegają barwy. Komputery mają wyświetlacze różniące się zakresem oddawanych barw, rozdzielczością i rozmiarem. Zyskuje popularność przeglądanie stron na mikroskopijnych ekranach telefonów, laptopów itp. Producenci monitorów, wreszcie, zrywają z zasadą że ekran ma 96dpi
- Czy warto wykorzystywać nową, często eksperymentalną funkcjonalność przeglądarek?
Tak!
- Można też formatować wszystko za pomocą tabelek, lub stosować sztuczki z ujemnymi marginesami itp. Jednak, jeśli zależy nam na tym aby Internet był lepszym miejscem, warto mieć na uwadze nieco nowsze rozwiązania. W przypadku tabelek, gdy zabraknie miejsca na ekranie w telefonie, ucierpi na tym czytelność strony i to w naprawdę paskudny sposób. Gdy wykorzystujemy sztuczki, lub jeszcze gorzej gdy polegamy na błędach przeglądarek, pewnego dnia spotka nas niespodzianka w stylu:
to nowe g**** nie działa
. Gdy nie załadują się piękne namalowane przyciski, skończymy ze stroną pełną dziurawych prostokątów.
Brzmi jak argumentacja z zeszłego dziesięciolecia? Bo to jest argumentacja z zeszłego dziesięciolecia. Przez lata, za sprawą braku konkurencji na rynku przeglądarek, technologia tworzenia stron przeżywała stagnację. W tym czasie zmieniło się tyle rzeczy, a projektanci stron wciąż zastanawiają się nad tym czy używać tabelek
.
Czemu? Bo alternatywą, zamiast plątaniny elementów tr i td jest mieszanka węzłów div. CSS, jest pomocny, ale chwilami wcale nie czyni niczego łatwiejszym.
.. ale do rzeczy..
Założenia
Układ
Tradycyjny. Trzy elementy: nagłówek, treść i pasek nawigacyjny z boku. Podobnych rozwiązań jest pełno. To jest chyba najprostsze: Określam margines, umieszczam na nim pasek nawigacyjny. Rozwiązanie nie wymaga sztuczek z atrybutem float.
div.main { margin: 15em; }
div.aside {
position:absolute; top:0; right:0;
width: 15em;
}
Tak przy okazji odradzam zaglądania do źródeł html. Nawet jeśli szablon jest czysty i prosty, to Blogger sam z siebie dodaje koszmarnie dużo elementów.
Wielkość tekstu
Jako _bazowej_ jednostki użyłem punktów. W ten sposób, przynajmniej w teorii tekst ma te same rozmiary niezależnie od wielkości ekranu i unikam koszmaru czytania mikroskopijnych literek na małym ekranie.
Wygląd
Efekty specjalne czyli cienie i zaokrąglenia, to czym najnowsze standardy potrafią najbardziej zauroczyć. Istotne jest, że wreszcie można coś określić wprost. Chcę zaokrąglone brzegi? Piszę że chcę zaokrąglone brzegi. Chcę by element rzucał cień? Piszę że chcę cienie. Żadnego kombinowania, tak właśnie powinno wyglądać projektowanie stron. Napisanie tego tekstu zajęło więcej czasu.
h1 {
border-radius: 0.5em;
box-shadow: 0 0 0.1em black;
text-shadow: 0 0 0.5em blue;
}
Ponieważ, CSS3 jest ciągle w opracowaniu, nowe właściwości wymagają dodania prefiksu -moz- i -webkit-
Ekekt końcowy
Może nie całkiem końcowy, bo projekt zrealizowałem ledwie w 60% ale i tak uznałem rezultaty za interesujące.Sprawdzając wygląd, przetestowałem go na większości dostępnych przeglądarek, tworząc w ten sposób prywatny ranking.
Etykiety: porównanie, R
Red 23:29
Prześlij komentarz