Cwiczenia 3 - CSS i Mediaqueries

TECHNIKI WWW (WFAIS.IF-C125)
(zajęcia 26.10.2016 r.)
1) Podstawowe szablony:
W kontekście modelu pudełkowego oraz używania szablonu strony można posłużyć się
“podstawowym” szablonem postępnym pod adresem:
-
Przykład stworzenia menu wraz z arkuszem stylu:
http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index1.html
-
Przykład szablonu kompletnej strony:
http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index2.html
2) Wstęp do mediaqueries
W standardzie CSS3 dostępne są selektory pozwalające nie tylko na wybór konkretnych
elementów ze struktury strony, ale również na wybór własności wizycznych na których
dana strona będzie wyświetlana. Pozwala to na tworzenie serwisów graficznie
dostosowanych do szerokości ekeranów na których dana strona ma zostac wyświetlona.
Podstawowy przykład użycia selektora mediaqueries wygląda następująco:
@media media-type {
selector {
cecha: wartość;
}
}
Czyli w hierarchi struktury CSS “normalny” selektor CSS jest dodatkowo otoczony
selektorem mediaqueries. W podanym selektorze “media-type” oznacza typ
urządzenia/urządzeń dla których ma obowiązywać dany selektor:
all
Dla wszystkich urządzeń.
aural
Dla syntezatorów mowy i dzwięku.
braille
Dla urządzeń którymi posługują się niewidomi w celu przeglądania stron
internetowych.
embossed
Dla drukarek breilla.
handheld
Dla urządzeń ręcznych bezprzewodowych .
print
Dla drukarek / meteriałów drukowanych.
projection
Dla projektorów ściennych.
screen
Dla komputerów z ekranem.
tty
Dla terminali z ograniczonymi możliwościami wyświetlania.
tv
Dla telewizorów.
Przykładowo możemy spróbować stworzyć selektor który będzie zmieniał kolor tła dla
konkretnego urządzenia:
<style>
@media screen {
div {
background-color:red;
}
}
</style>
Można również przygotować osobne pliki CSS dla każdego typu urządzenia i linkowac je do
głownej strony posługując się atrybutem “media” w znaczniku <link>:
​ <link media=”tv,handheld” href=”tvmedia.css”>
<link media=”screen” href=”screenmedia.css”>
Dla lepszego sterowania regułami media możemy posługiwać się atrybutami dodatkowy
cechami sterującymi stosowaniem reguł np.:
@media all and (min-width:480px) and (max-width:800px) {
div {
background-color:green;
}
}
Definicja określona powyżej mówi przeglądarce że tło elementu <div> ma zostać ustawione
na kolor zielony na wszystkich typach urządzeń tylko wtedy kiedy szerokość okna
przeglądarki będzie zawierać się w przedziale od 480px od 800px.
Przykład zmodyfikowanego szablonu strony który dostosowuje się w zalezności od
dostępnej szerokości ekranu dostępn jest pod adresem:
http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index3.html
W przykładzie tym stworzona dwa pliki CSS które osbługują rózne szerokości ekranu.
Zostały włączone za pomocą linkowania i atrybutu “media”:
<link href="xstyle.css" rel="stylesheet" media="screen and (min-width:
1024px)">
<link href="mstyle.css" rel="stylesheet" media="screen and (max-width:
1023px)">