Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00249 003980 12913261 na godz. na dobę w sumie
CSS3. Podręcznik nowoczesnego webdevelopera - ebook/pdf
CSS3. Podręcznik nowoczesnego webdevelopera - ebook/pdf
Autor: Liczba stron: 336
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0979-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook (-40%), audiobook).

Oto przyszłość rozwiązań projektowych dla stron WWW

CSS to język, dzięki któremu możesz opisać wygląd tworzonej strony WWW. Jego pierwsza wersja ujrzała światło dzienne w 1996 roku i od tej pory język ten jest nieustannie rozwijany. Dziś natomiast obowiązuje wersja CSS3 — podzielona na moduły, do których zostały przypisane dotychczasowe atrybuty oraz dodane nowe możliwości. Próba przebrnięcia przez oficjalną dokumentację będzie Cię kosztowała wiele wysiłku, trudu oraz nieprzespanych nocy. Zapewne chcesz tego uniknąć? Ta książka to rozwiązanie idealne dla Ciebie!

Znajdziesz w niej najważniejsze informacje na temat CSS3, starannie opracowane i podane w przystępnej formie. Kolejne rozdziały pozwolą Ci zdobyć wiadomości o tak zwanych media queries, pozwalających zmieniać wygląd elementów strony w zależności od urządzenia, oraz szczegółową wiedzę dotyczącą selektorów. Ponadto przekonasz się, jak pseudoklasy i pseudoznaczniki mogą ułatwić Ci życie oraz jak pozbyć się nudnych czcionek dzięki możliwościom @font-face. Następnym wyzwaniem stojącym przed Tobą jest zapoznanie się z transformacjami 2D i 3D, efektami specjalnymi oraz elastycznymi układami elementów (Flexbox). Ta książka jest doskonałą lekturą dla projektantów stron, którzy chcą błyskawicznie poznać i wykorzystać nowości CSS3 w swoich projektach.

Dzięki znacznej ilości rzeczywistych przykładów i koncentracji na zasadach przygotowania dobrego układu, książka pomoże Ci w poszerzeniu umiejętności z zakresu CSS. Poruszone zostały między innymi następujące zagadnienia:

Poznaj potencjał nowej specyfikacji CSS3!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: The Book of CSS3: A Developer s Guide to the Future of Web Design, 2nd Edition Tłumaczenie: Julia Szajkowska (wstęp, rozdz. 1 – 17), Robert Górczyński (rozdz. 18, 19, dodatki) ISBN: 978-83-283-0976-0 Copyright © 2015 by Peter Gasston. Title of English-language original: The Book of CSS3, 2nd Edition, ISBN 978-1-59327-580-8, published by No Starch Press. Polish language edition copyright © 2015 by Helion SA. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/css3pn.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/css3pn Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci PRZEDMOWA ........................................................................................... 15 WPROWADZENIE ..................................................................................... 17 Tematy omawiane w ksi(cid:200)(cid:285)ce .................................................................................................18 Rozdzia(cid:239) po rozdziale .............................................................................................................18 Dodatki i inne (cid:283)ród(cid:239)a ..............................................................................................................19 Wprowadzenie do wydania drugiego .....................................................................................19 1 POZNAJCIE CSS3 ...................................................................................... 21 Co to jest CSS3 i sk(cid:200)d si(cid:218) wzi(cid:200)(cid:239)? ............................................................................................22 Krótka historia CSS3 ..........................................................................................................22 CSS3 ma budow(cid:218) modu(cid:239)ow(cid:200) .............................................................................................22 Nie istnieje co(cid:258) takiego jak CSS3 .......................................................................................23 Status modu(cid:239)u i proces rekomendowania ..............................................................................24 Poznajmy sk(cid:239)adni(cid:218) ..................................................................................................................25 Przedrostki nazw ...................................................................................................................26 Zaczynamy! ............................................................................................................................27 2 MEDIA QUERIES — ZAPYTANIA O MEDIA .............................................. 29 Zalety modu(cid:239)u Media Queries ...............................................................................................30 Sk(cid:239)adnia ..................................................................................................................................32 Cechy mediów .......................................................................................................................34 Szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202) ........................................................................................................35 Rozdzielczo(cid:258)(cid:202) sprz(cid:218)towa ...................................................................................................37 Szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202) ekranu urz(cid:200)dzenia ..........................................................................39 Orientacja ...........................................................................................................................40 Proporcje ...........................................................................................................................41 (cid:146)(cid:200)czone cechy mediów ..........................................................................................................42 Poleć książkęKup książkę Najpierw na urz(cid:200)dzenia przeno(cid:258)ne ....................................................................................... 43 Podsumowanie ...................................................................................................................... 44 Zapytania o media — wdro(cid:285)enie w przegl(cid:200)darkach ........................................................... 44 3 SELEKTORY .............................................................................................. 45 Selektory atrybutów .............................................................................................................. 46 Selektory atrybutów wprowadzone w CSS3 ........................................................................ 47 Selektor pocz(cid:200)tku (cid:239)a(cid:241)cucha warto(cid:258)ci atrybutu .................................................................. 47 Selektor ko(cid:241)ca (cid:239)a(cid:241)cucha warto(cid:258)ci atrybutu ....................................................................... 50 Selektor dowolnej warto(cid:258)ci atrybutu ................................................................................ 51 Selektory wielu atrybutów ................................................................................................ 52 Kombinator dowolnych braci ................................................................................................ 53 Podsumowanie ...................................................................................................................... 54 Selektory — wdro(cid:285)enie w przegl(cid:200)darkach ........................................................................... 55 4 PSEUDOKLASY I PSEUDOZNACZNIKI .................................................... 57 Pseudoklasy strukturalne ....................................................................................................... 58 Pseudoklasy z rodziny :nth-* ............................................................................................. 59 Inne pseudoklasy ................................................................................................................... 67 Pseudoklasa :target ............................................................................................................ 67 Pseudoklasa :empty ........................................................................................................... 68 Pseudoklasa :root .............................................................................................................. 69 Pseudoklasa :not() ............................................................................................................. 69 Stany znaczników interfejsu u(cid:285)ytkownika ......................................................................... 70 Pseudoklasy weryfikacji ogranicze(cid:241) ................................................................................... 72 Pseudoznaczniki .................................................................................................................... 73 Pseudoznacznik ::selection ................................................................................................ 73 Podsumowanie ...................................................................................................................... 74 Selektory DOM i selektory atrybutów — wdro(cid:285)enie w przegl(cid:200)darkach .............................. 75 5 INTERNETOWE KROJE PISMA .................................................................. 77 Regu(cid:239)a @font-face ................................................................................................................. 78 Definiowanie ró(cid:285)nych odmian kroju pisma ....................................................................... 80 Prawdziwe odmiany krojów pisma kontra generowane sztucznie ................................... 81 Niezawodna sk(cid:239)adnia @font-face .......................................................................................... 82 Stosowanie lokalnych krojów pisma .................................................................................. 82 Formaty krojów pisma ...................................................................................................... 82 Ostateczna forma niezawodnej sk(cid:239)adni ............................................................................. 83 Licencjonowanie krojów pisma na potrzeby u(cid:285)ywania w internecie .................................... 84 Przyk(cid:239)ad z (cid:285)ycia wzi(cid:218)ty .......................................................................................................... 85 Kontrolowane wczytywanie krojów pisma ........................................................................... 87 Wi(cid:218)cej o w(cid:239)a(cid:258)ciwo(cid:258)ciach krojów pisma ................................................................................ 87 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) font-size-adjust .............................................................................................. 87 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) font-stretch .................................................................................................... 90 8 S p i s t r e (cid:258) c i Poleć książkęKup książkę W(cid:239)a(cid:258)ciwo(cid:258)ci fontów w formacie OpenType ..........................................................................91 Stosowanie w(cid:239)a(cid:258)ciwo(cid:258)ci krojów pisma ..............................................................................91 W(cid:239)a(cid:258)ciwo(cid:258)ci krojów pisma .................................................................................................94 Podsumowanie .......................................................................................................................95 Internetowe kroje pisma — wdro(cid:285)enie w przegl(cid:200)darkach ....................................................95 6 EFEKTY TEKSTOWE I STYLE TYPOGRAFICZNE ........................................ 97 Osie i wspó(cid:239)rz(cid:218)dne ................................................................................................................98 Efekty przestrzenne — text-shadow ...................................................................................100 Cienie z(cid:239)o(cid:285)one .................................................................................................................102 Ograniczenie wy(cid:258)wietlania nadmiaru tekstu ........................................................................103 Wyrównywanie tekstu .........................................................................................................105 Kontrola zawijania wierszy ...................................................................................................105 Dzielenie wyrazów ...........................................................................................................106 Dzielenie wyrazów z u(cid:285)yciem (cid:239)(cid:200)cznika ............................................................................107 Skalowanie zawarto(cid:258)ci znaczników ......................................................................................108 Podsumowanie .....................................................................................................................109 Efekty tekstowe i style typograficzne — wdro(cid:285)enie w przegl(cid:200)darkach ..............................109 7 W KILKU KOLUMNACH ......................................................................... 111 Metody uk(cid:239)adania tre(cid:258)ci w kolumnach .................................................................................112 Okre(cid:258)lona liczba kolumn — column-count .....................................................................112 Dynamicznie definiowana szeroko(cid:258)(cid:202) kolumn — column-width ......................................113 Ró(cid:285)ne sposoby rozmieszczania zawarto(cid:258)ci w kolumnach ...............................................114 (cid:146)(cid:200)czenie w(cid:239)a(cid:258)ciwo(cid:258)ci column-count z column-width ......................................................116 Odst(cid:218)py i linie ......................................................................................................................117 Umieszczanie innych obiektów w kolumnach .....................................................................118 Znaczniki rozci(cid:200)gaj(cid:200)ce si(cid:218) na kilka kolumn ..........................................................................120 Podsumowanie .....................................................................................................................121 Kolumny — wdro(cid:285)enie w przegl(cid:200)darkach ...........................................................................121 8 OBRAZY T(cid:146)A ......................................................................................... 123 Uaktualnienie istniej(cid:200)cych w(cid:239)a(cid:258)ciwo(cid:258)ci t(cid:239)a ...........................................................................124 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) background-position .....................................................................................124 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) background-attachment ...............................................................................125 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) background-repeat .......................................................................................125 Wiele obrazów t(cid:239)a ................................................................................................................127 Dynamicznie skalowane obrazy t(cid:239)a ......................................................................................129 W(cid:239)a(cid:258)ciwo(cid:258)ci background-clip i background-origin ...............................................................131 Uaktualniona skrócona sk(cid:239)adnia ustawie(cid:241) t(cid:239)a .......................................................................133 Podsumowanie .....................................................................................................................134 Obrazy t(cid:239)a — wdro(cid:285)enie w przegl(cid:200)darkach ........................................................................135 S p i s t r e (cid:258) c i 9 Poleć książkęKup książkę 9 EFEKTY OBRAMOWA(cid:148) I KONTENERÓW ............................................... 137 Zaokr(cid:200)glanie rogów ............................................................................................................. 137 Skrócona wersja zapisu regu(cid:239)y w(cid:239)a(cid:258)ciwo(cid:258)ci border-radius .............................................. 140 Stosowanie warto(cid:258)ci procentowych ................................................................................ 141 Obrazy w charakterze ramek .............................................................................................. 142 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) border-image-source ................................................................................... 142 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) border-image-slice ....................................................................................... 143 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) border-image-width ..................................................................................... 145 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) border-image-outset .................................................................................... 147 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) border-image-repeat ................................................................................... 147 Skrócona posta(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci border-image .................................................................... 148 Wdro(cid:285)enie w przegl(cid:200)darkach .......................................................................................... 149 Cienie zewn(cid:218)trzne .............................................................................................................. 149 Cienie wewn(cid:218)trzne ............................................................................................................. 151 Podsumowanie .................................................................................................................... 152 Efekty obramowa(cid:241) i kontenerów — wdro(cid:285)enie w przegl(cid:200)darkach ................................... 152 10 KOLORY I PRZEZROCZYSTO(cid:165)(cid:109) ............................................................. 153 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) opacity ............................................................................................................. 154 Nowe i poszerzone warto(cid:258)ci kolorów ................................................................................ 155 Kana(cid:239) alfa .......................................................................................................................... 155 Barwa, nasycenie, (cid:258)rednie (cid:258)wiat(cid:239)o bia(cid:239)e ........................................................................... 158 Model HSLA .................................................................................................................... 160 Zmienna koloru currentColor ......................................................................................... 161 Podsumowanie .................................................................................................................... 162 Kolory i przezroczysto(cid:258)(cid:202) — wdro(cid:285)enie w przegl(cid:200)darkach ................................................. 162 11 GRADIENTY ........................................................................................... 163 Gradient liniowy .................................................................................................................. 164 Okre(cid:258)lanie kierunku gradientu ........................................................................................ 164 Dodatkowe warto(cid:258)ci kolorów stopuj(cid:200)cych ..................................................................... 166 Powielanie gradientu liniowego ....................................................................................... 168 Gradient promieniowy ........................................................................................................ 170 Korzystanie z gradientu promieniowego ......................................................................... 170 Wiele kolorów stopuj(cid:200)cych ............................................................................................. 172 Powielanie gradientu promieniowego ............................................................................. 173 Gradienty z(cid:239)o(cid:285)one ............................................................................................................... 175 Podsumowanie .................................................................................................................... 176 Gradienty — wdro(cid:285)enie w przegl(cid:200)darkach ......................................................................... 176 10 S p i s t r e (cid:258) c i Poleć książkęKup książkę 12 TRANSFORMACJE DWUWYMIAROWE ................................................... 177 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transform ..........................................................................................................178 Funkcja rotate ..................................................................................................................178 Funkcja translate ..............................................................................................................182 Funkcja scale ....................................................................................................................184 Funkcja skew ....................................................................................................................185 Wa(cid:285)na uwaga dotycz(cid:200)ca funkcji modu(cid:239)u transformacji ........................................................187 Przekszta(cid:239)canie znaczników za pomoc(cid:200) macierzy ....................................................................188 Podsumowanie .....................................................................................................................191 Transformacje dwuwymiarowe — wdro(cid:285)enie w przegl(cid:200)darkach .......................................191 13 TRANSFORMACJE TRÓJWYMIAROWE .................................................... 193 Elementy trójwymiarowe w CSS .........................................................................................194 Funkcje transformuj(cid:200)ce ........................................................................................................196 Obrót wokó(cid:239) osi ...............................................................................................................196 Funkcja perspective ..........................................................................................................198 Translacja wzd(cid:239)u(cid:285) osi .......................................................................................................200 Skalowanie .......................................................................................................................201 Macierz transformacji .......................................................................................................202 W(cid:239)a(cid:258)ciwo(cid:258)ci perspective i perspective-origin ......................................................................204 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transform-origin ...............................................................................................205 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transform-style .................................................................................................207 Wy(cid:258)wietlanie i ukrywanie tylnej (cid:258)cianki ...............................................................................208 Podsumowanie .....................................................................................................................209 Transformacje trójwymiarowe — wdro(cid:285)enie w przegl(cid:200)darkach ........................................209 14 PRZEJ(cid:165)CIA I ANIMACJE ......................................................................... 211 Przej(cid:258)cia ...............................................................................................................................212 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transition-property .......................................................................................213 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transition-duration ........................................................................................213 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transition-timing-function .............................................................................214 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) transition-delay .............................................................................................218 Skrócony zapis w(cid:239)a(cid:258)ciwo(cid:258)ci transition ..............................................................................219 Przyk(cid:239)ad pe(cid:239)nego przej(cid:258)cia ...............................................................................................220 Przej(cid:258)cia wielokrotne .......................................................................................................221 Animacje ...............................................................................................................................222 Klatki kluczowe ................................................................................................................222 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-name ............................................................................................225 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-duration .......................................................................................225 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-timing-function ............................................................................226 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-delay ............................................................................................226 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-iteration-count .............................................................................226 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-direction ......................................................................................227 S p i s t r e (cid:258) c i 11 Poleć książkęKup książkę W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-fill-mode ...................................................................................... 228 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) animation-play-state ..................................................................................... 229 Skrócona posta(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci animation .......................................................................... 229 Animacje wielokrotne ...................................................................................................... 231 Podsumowanie .................................................................................................................... 232 Przej(cid:258)cia i animacje — wdro(cid:285)enie w przegl(cid:200)darkach .......................................................... 232 15 ELASTYCZNY UK(cid:146)AD ELEMENTÓW ........................................................ 233 Deklarowanie modu(cid:239)u elastycznego uk(cid:239)adu pude(cid:239)kowego ................................................. 234 Uk(cid:239)ad elementów w module Flexbox ................................................................................. 235 Odwracanie kolejno(cid:258)ci znaczników .................................................................................... 236 Pe(cid:239)na zmiana rozmieszczenia zawarto(cid:258)ci ............................................................................ 237 Zwi(cid:218)kszanie elastyczno(cid:258)ci ................................................................................................... 238 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) flex-grow ..................................................................................................... 238 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) flex-shrink .................................................................................................... 239 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) flex-basis ...................................................................................................... 240 Skrócona sk(cid:239)adnia w(cid:239)a(cid:258)ciwo(cid:258)ci flex .................................................................................. 241 Wyrównanie znaczników wewn(cid:200)trz kontenera .................................................................. 242 Wyrównanie w poziomie za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci justify-content .................................. 242 Wyrównanie w pionie za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci align-items ............................................. 243 Wyrównanie znaczników wzd(cid:239)u(cid:285) osi prostopad(cid:239)ej za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci align-self .... 244 W(cid:239)a(cid:258)ciwo(cid:258)ci wrap i flow .................................................................................................. 245 Skrócona sk(cid:239)adnia w(cid:239)a(cid:258)ciwo(cid:258)ci flex-flow ......................................................................... 246 Wyrównywanie wielu wierszy za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci align-content ............................. 246 Obs(cid:239)uga w przegl(cid:200)darkach i sk(cid:239)adnia dziedziczona ............................................................. 247 Podsumowanie .................................................................................................................... 247 Elastyczny uk(cid:239)ad elementów — wdro(cid:285)enie w przegl(cid:200)darkach ........................................... 248 16 WARTO(cid:165)CI I ROZMIARY ........................................................................ 249 Wzgl(cid:218)dne jednostki d(cid:239)ugo(cid:258)ci ............................................................................................... 249 Jednostki pochodne znacznika g(cid:239)ównego ........................................................................ 250 Jednostki pochodne widocznego obszaru ....................................................................... 251 Warto(cid:258)ci obliczone .............................................................................................................. 252 Skalowanie znaczników ....................................................................................................... 254 Skalowanie pude(cid:239)ka ......................................................................................................... 254 Skalowanie wewn(cid:218)trzne i zewn(cid:218)trzne ............................................................................ 255 Podsumowanie .................................................................................................................... 259 Warto(cid:258)ci i rozmiary — wdro(cid:285)enie w przegl(cid:200)darkach ......................................................... 259 17 SIATKI ................................................................................................... 261 Terminologia ....................................................................................................................... 262 Deklarowanie i definiowanie siatki ...................................................................................... 263 Tworzenie siatek jawnych przez okre(cid:258)lenie wymiarów toru .......................................... 263 Rozmieszczanie elementów w siatce jawnej ................................................................... 266 12 S p i s t r e (cid:258) c i Poleć książkęKup książkę Skrócone w(cid:239)a(cid:258)ciwo(cid:258)ci rozmieszczania elementów w siatce jawnej ....................................268 Powtarzanie linii siatki ......................................................................................................269 Nazwane obszary siatki ....................................................................................................270 Skrócona sk(cid:239)adnia w(cid:239)a(cid:258)ciwo(cid:258)ci grid-template ..................................................................272 Siatki niejawne ..................................................................................................................273 Elementy siatki bez zadeklarowanego miejsca .................................................................274 (cid:146)(cid:200)czenie siatki jawnej z niejawn(cid:200) .........................................................................................274 Posta(cid:202) skrócona ...............................................................................................................275 Kolejno(cid:258)(cid:202) uk(cid:239)adania elementów siatki ..................................................................................276 Sk(cid:239)adnia w przegl(cid:200)darce Internet Explorer ..........................................................................278 Podsumowanie .....................................................................................................................279 Siatki — wdro(cid:285)enie w przegl(cid:200)darkach .................................................................................279 18 TRYBY MIESZANIA, FILTRY I MASKOWANIE ........................................ 281 Tryby mieszania ...................................................................................................................282 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) background-blend-mode ..............................................................................283 W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) isolation ........................................................................................................286 Filtry .....................................................................................................................................288 blur() ................................................................................................................................288 brightness() i contrast() ....................................................................................................289 grayscale(), sepia() i saturate() ..........................................................................................289 hue-rotate() ......................................................................................................................290 opacity() ...........................................................................................................................290 drop-shadow() .................................................................................................................291 Wiele funkcji filtrów .........................................................................................................291 Filtry w SVG .....................................................................................................................292 Maskowanie .........................................................................................................................293 Przyci(cid:218)cie .........................................................................................................................293 Maskowanie obrazu .........................................................................................................299 Maskowanie kraw(cid:218)dzi ......................................................................................................300 Maskowanie w SVG .........................................................................................................301 (cid:146)(cid:200)czenie efektów dzia(cid:239)ania filtrów z maskowaniem ............................................................301 Podsumowanie .....................................................................................................................302 Tryby mieszania, filtry i maskowanie — wdro(cid:285)enie w przegl(cid:200)darkach ...............................303 19 PRZYSZ(cid:146)O(cid:165)(cid:109) CSS ................................................................................... 305 Kszta(cid:239)ty .................................................................................................................................305 Wykluczenia .........................................................................................................................307 Obszary ................................................................................................................................309 Zmienne ...............................................................................................................................310 Zapytania o funkcje ..............................................................................................................312 Obs(cid:239)uga w urz(cid:200)dzeniach ......................................................................................................313 Sta(cid:239)e po(cid:239)o(cid:285)enie .....................................................................................................................314 S p i s t r e (cid:258) c i 13 Poleć książkęKup książkę I znacznie, znacznie wi(cid:218)cej .................................................................................................. 315 Podsumowanie .................................................................................................................... 315 Przysz(cid:239)o(cid:258)(cid:202) CSS — wdro(cid:285)enie w przegl(cid:200)darkach ................................................................ 316 A OBS(cid:146)UGA CSS3 W OBECNIE NAJWA(cid:191)NIEJSZYCH PRZEGL(cid:107)DARKACH INTERNETOWYCH ................................................ 317 Zapytania o media (rozdzia(cid:239) 2.) ........................................................................................... 318 Selektory (rozdzia(cid:239) 3.) ......................................................................................................... 319 Selektory DOM i selektory atrybutów (rozdzia(cid:239) 4.) ............................................................ 319 Internetowe kroje pisma (rozdzia(cid:239) 5.) ................................................................................. 319 Efekty tekstowe i style typograficzne (rozdzia(cid:239) 6.) .............................................................. 320 Kolumny (rozdzia(cid:239) 7.) .......................................................................................................... 320 Obrazy t(cid:239)a (rozdzia(cid:239) 8.) ........................................................................................................ 321 Efekty obramowa(cid:241) i kontenerów (rozdzia(cid:239) 9.) ................................................................... 321 Kolory i przezroczysto(cid:258)(cid:202) (rozdzia(cid:239) 10.) ............................................................................... 321 Gradienty (rozdzia(cid:239) 11.) ....................................................................................................... 322 Transformacje dwuwymiarowe (rozdzia(cid:239) 12.) .................................................................... 322 Transformacje trójwymiarowe (rozdzia(cid:239) 13.) ...................................................................... 322 Przej(cid:258)cia i animacje (rozdzia(cid:239) 14.) ........................................................................................ 322 Elastyczny uk(cid:239)ad elementów (rozdzia(cid:239) 15.) ......................................................................... 323 Warto(cid:258)ci i rozmiary (rozdzia(cid:239) 16.) ....................................................................................... 323 Siatki (rozdzia(cid:239) 17.) .............................................................................................................. 323 Tryby mieszania, filtry i maskowanie (rozdzia(cid:239) 18.) ............................................................. 324 Przysz(cid:239)o(cid:258)(cid:202) CSS (rozdzia(cid:239) 19.) .............................................................................................. 324 B ZASOBY W INTERNECIE ........................................................................ 325 Ogólne zasoby dotycz(cid:200)ce CSS ............................................................................................ 325 Rozdzia(cid:239) 2. „Media Queries — zapytania o media” ........................................................... 326 Rozdzia(cid:239) 3. „Selektory” i rozdzia(cid:239) 4. „Pseudoklasy i pseudoznaczniki” ............................... 326 Rozdzia(cid:239) 5. „Internetowe kroje pisma” i rozdzia(cid:239) 6. „Efekty tekstowe i style typograficzne” ...... 326 Rozdzia(cid:239) 7. „W kilku kolumnach” ........................................................................................ 327 Rozdzia(cid:239) 8. „Obrazy t(cid:239)a” i rozdzia(cid:239) 9. „Efekty obramowa(cid:241) i kontenerów” ......................... 327 Rozdzia(cid:239) 10. „Kolory i przezroczysto(cid:258)(cid:202)” ............................................................................. 327 Rozdzia(cid:239) 11. „Gradienty” ..................................................................................................... 327 Rozdzia(cid:239) 12. „Transformacje dwuwymiarowe” i rozdzia(cid:239) 13. „Transformacje trójwymiarowe” ............................................................... 328 Rozdzia(cid:239) 14. „Przej(cid:258)cia i animacje” ...................................................................................... 328 Rozdzia(cid:239) 15. „Elastyczny uk(cid:239)ad elementów” ........................................................................ 328 Rozdzia(cid:239) 16. „Warto(cid:258)ci i rozmiary” ..................................................................................... 328 Rozdzia(cid:239) 17. „Siatki” ............................................................................................................ 329 Rozdzia(cid:239) 18. „Tryby mieszania, filtry i maskowanie” ........................................................... 329 Rozdzia(cid:239) 19. „Przysz(cid:239)o(cid:258)(cid:202) CSS” ............................................................................................. 329 SKOROWIDZ .......................................................................................... 331 14 S p i s t r e (cid:258) c i Poleć książkęKup książkę 2 Media Queries — zapytania o media W CZASACH, GDY STRONY WWW PRZEGL(cid:107)DA(cid:146)O SI(cid:125) TYLKO W PRZEGL(cid:107)DARKACH KOMPUTERÓW STACJONARNYCH I LAP- TOPÓW, STOSOWANIE REGU(cid:146) CSS NIE NASTR(cid:125)CZA(cid:146)O WI(cid:125)KSZYCH trudno(cid:258)ci. Wprawdzie trzeba by(cid:239)o zadba(cid:202) o kompatybilno(cid:258)(cid:202) kodu z ró(cid:285)nymi przegl(cid:200)darkami i upewni(cid:202) si(cid:218), (cid:285)e wszystko funkcjonuje jak nale(cid:285)y we wszystkich systemach operacyjnych, ale mia(cid:239)o si(cid:218) gwarancj(cid:218), (cid:285)e niemal wszyscy przegl(cid:200)dali stron(cid:218) na ogó(cid:239) na po- dobnych urz(cid:200)dzeniach. W ci(cid:200)gu kilku ostatnich lat stali(cid:258)my si(cid:218) jednak (cid:258)wiad- kami gwa(cid:239)townego wzrostu oferty na rynku urz(cid:200)dze(cid:241) umo(cid:285)liwiaj(cid:200)cych dost(cid:218)p do internetu. Teraz zasoby sieci ogl(cid:200)da si(cid:218) na konsolach do gier czy urz(cid:200)dzeniach prze- no(cid:258)nych, takich jak smartfony czy tablety. Wy(cid:258)wietlanie strony zawsze w ten sam sposób nie ma sensu w czasach, gdy odbiorca mo(cid:285)e równie dobrze korzysta(cid:202) z pa- noramicznego monitora, jak i w(cid:200)skiego ekranu urz(cid:200)dzenia przeno(cid:258)nego. Arkusze stylów CSS ju(cid:285) od pewnego czasu oferuj(cid:200) mo(cid:285)liwo(cid:258)(cid:202) przypisywania odmiennych stylów wy(cid:258)wietlania elementów strony ró(cid:285)nym rodzajom urz(cid:200)dze(cid:241) wyj(cid:258)ciowych. Wykorzystuj(cid:200) do tego atrybut media znacznika link: link href= style.css rel= stylesheet media= screen Poleć książkęKup książkę Takie rozwi(cid:200)zanie jednak nie jest pozbawione wad, przede wszystkim za(cid:258) jest ono wyj(cid:200)tkowo nieprecyzyjne — ekran, o którym mowa w przedstawionym przyk(cid:239)adzie, mo(cid:285)e mie(cid:202) przecie(cid:285) przek(cid:200)tn(cid:200) o d(cid:239)ugo(cid:258)ci dziewi(cid:218)ciu centymetrów albo osiemdziesi(cid:218)ciu centymetrów. Ta lista rodzajów sprz(cid:218)tu ma zbyt obszerne kategorie, a wiele urz(cid:200)dze(cid:241), które teoretycznie opisuje, w ogóle jej nie rozpoznaje. Na przyk(cid:239)ad nie s(cid:239)ysza(cid:239)em o ani jednym telewizorze z funkcj(cid:200) przegl(cid:200)dania sie- ci, który reagowa(cid:239)by poprawnie na rodzaj tv. Nic zatem dziwnego, (cid:285)e W3C za- cz(cid:218)(cid:239)o stopniowo odchodzi(cid:202) od korzystania z rodzajów urz(cid:200)dze(cid:241) wyj(cid:258)ciowych. Specyfikacja CSS3 udost(cid:218)pnia nast(cid:218)puj(cid:200)ce rozwi(cid:200)zanie tego problemu — zapytania o media znajduj(cid:200)ce si(cid:218) wewn(cid:200)trz modu(cid:239)u Media Queries (http://www. w3.org/TR/css3-mediaqueries/). Modu(cid:239) ten oferuje sk(cid:239)adni(cid:218) zapytania, dzi(cid:218)ki której mo(cid:285)na uzyska(cid:202) bardzo dok(cid:239)adne informacje o urz(cid:200)dzeniu wykorzystywanym przez u(cid:285)ytkownika, i w ten sposób rozszerza wyra(cid:283)nie list(cid:218) dost(cid:218)pnych typów mediów. Za jego pomoc(cid:200) mo(cid:285)na dostosowa(cid:202) styl wy(cid:258)wietlania strony do potrzeb urz(cid:200)dzenia u(cid:285)ytkownika. Opis ten mówi mo(cid:285)e niewiele, ale, wierz mi, modu(cid:239) Media Queries jest jednym z najbardziej rewolucyjnych w ca(cid:239)ej specyfikacji CSS3. Dzi(cid:218)ki niemu wygl(cid:200)d strony internetowej przestaje by(cid:202) ograniczeniem, a u(cid:285)ytkownicy mog(cid:200) cieszy(cid:202) si(cid:218) jej zawarto(cid:258)ci(cid:200) niezale(cid:285)nie od urz(cid:200)dzenia, na jakim j(cid:200) przegl(cid:200)daj(cid:200). Modu(cid:239) Media Queries otrzyma(cid:239) status modu(cid:239)u rekomendowanego przez W3C, uwa(cid:285)a si(cid:218) go wi(cid:218)c za cz(cid:218)(cid:258)(cid:202) standardu. Wdro(cid:285)ono go we wszystkich najwa(cid:285)niejszych przegl(cid:200)darkach internetowych, w tym tak(cid:285)e w Internet Explorerze pocz(cid:200)wszy od wersji 9. Zalety modu(cid:239)u Media Queries Aby zademonstrowa(cid:202) szybko mo(cid:285)liwo(cid:258)ci modu(cid:239)u zapyta(cid:241) o media i pokaza(cid:202) jego elastyczno(cid:258)(cid:202), zaprezentuj(cid:218) teraz przyk(cid:239)ad dostosowania wygl(cid:200)du strony WWW do specyficznego (cid:258)rodowiska, jakim jest przegl(cid:200)darka mobilna. Dzia(cid:239)anie to, jak si(cid:218) wkrótce przekonasz, nie b(cid:218)dzie wymaga(cid:239)o wielkiego wysi(cid:239)ku. Nie mo(cid:285)na wykluczy(cid:202), (cid:285)e odwiedzaj(cid:200)cy Twoj(cid:200) stron(cid:218) za pomoc(cid:200) urz(cid:200)dze(cid:241) mobilnych bardzo si(cid:218) m(cid:218)cz(cid:200). Powody mog(cid:200) by(cid:202) ró(cid:285)ne — zbyt ma(cid:239)y rozmiar tekstu czy konieczno(cid:258)(cid:202) przewijania du(cid:285)ych fragmentów strony po jej powi(cid:218)k- szeniu, by dosta(cid:202) si(cid:218) do menu nawigacyjnego. Z kolei samo menu mo(cid:285)e wyko- rzystywa(cid:202) funkcj(cid:218) rozwijania po wskazaniu jego elementu kursorem myszy, któ- ra to funkcja cz(cid:218)sto nie wyst(cid:218)puje w urz(cid:200)dzeniach przeno(cid:258)nych. Tego rodzaju urz(cid:200)dzenia pracuj(cid:200) zazwyczaj na s(cid:239)abych (cid:239)(cid:200)czach internetowych, wi(cid:218)c pobieranie grafiki o wi(cid:218)kszych rozmiarach automatycznie staje si(cid:218) problemem — po pierw- sze, ze wzgl(cid:218)du na czas pobierania, a po drugie, z powodu zu(cid:285)ywania znacznej cz(cid:218)(cid:258)ci pakietu internetowego u(cid:285)ytkownika. Twórcy niektórych stron staraj(cid:200) si(cid:218) rozwi(cid:200)za(cid:202) ten problem, przygotowuj(cid:200)c nowe wersje witryn, projektowane spe- cjalnie z my(cid:258)l(cid:200) o urz(cid:200)dzeniach przeno(cid:258)nych, lecz wi(cid:200)(cid:285)e si(cid:218) to zazwyczaj z ko- nieczno(cid:258)ci(cid:200) wykonania mnóstwa dodatkowej pracy. Nale(cid:285)y zdefiniowa(cid:202) poddo- men(cid:218) przeznaczon(cid:200) na tak(cid:200) stron(cid:218), umie(cid:258)ci(cid:202) na niej pliki arkuszy stylów i szablony 30 R o z d z i a (cid:239) 2 Poleć książkęKup książkę HTML inne ni(cid:285) te, z których korzysta strona podstawowa. Nast(cid:218)pnie nale(cid:285)y zmieni(cid:202) rozmiary grafik tak, by ilustracje pasowa(cid:239)y do mniejszych ekranów, i przy- gotowa(cid:202) skrypt, który rozpozna urz(cid:200)dzenie otwieraj(cid:200)ce stron(cid:218) i w razie potrzeby skieruje u(cid:285)ytkownika na przeno(cid:258)n(cid:200) wersj(cid:218) strony. Takie rozwi(cid:200)zanie mo(cid:285)e powo- dowa(cid:202) wyst(cid:200)pienie dodatkowych problemów — skrypt musi obs(cid:239)ugiwa(cid:202) najnow- sze wersje wszystkich przegl(cid:200)darek przeno(cid:258)nych, a aktualizowanie zawarto(cid:258)ci witryny wi(cid:200)(cid:285)e si(cid:218) zazwyczaj z duplikowaniem jej zawarto(cid:258)ci, tylko bowiem w ten sposób mo(cid:285)na zapewni(cid:202) sobie zgodno(cid:258)(cid:202) obu wersji strony. Modu(cid:239) Media Queries pozwala rozwi(cid:200)za(cid:202) wiele spo(cid:258)ród tych problemów. Przede wszystkim zawarte w nim zapytania pozwalaj(cid:200) okre(cid:258)li(cid:202) rodzaj urz(cid:200)dzenia na podstawie jego atrybutów, zwalniaj(cid:200) Ci(cid:218) wi(cid:218)c z konieczno(cid:258)ci u(cid:285)ycia skryp- tów badaj(cid:200)cych parametry przegl(cid:200)darki. Zapytania o media pozwalaj(cid:200) wybra(cid:202) zbiór regu(cid:239) stylów dostosowanych dok(cid:239)adnie do mo(cid:285)liwo(cid:258)ci danego urz(cid:200)dzenia. Je(cid:258)li wi(cid:218)c zapytanie wykryje urz(cid:200)dzenie o ma(cid:239)ym ekranie, strona zostanie wy- (cid:258)wietlona wed(cid:239)ug wskaza(cid:241) odpowiednio dobranego zestawu regu(cid:239) stylów, który zadba o to, by znikn(cid:218)(cid:239)y z niej zb(cid:218)dne elementy, wy(cid:258)wietlane grafiki by(cid:239)y odpo- wiednio mniejsze, a tekst — czytelny. Przyk(cid:239)adem strony, na której zastosowano takie rozwi(cid:200)zanie, jest The Next Web (http://thenextweb.com) przedstawiona na rysunku 2.1. Rysunek 2.1. Strona internetowa The Next Web wy(cid:258)wietlana w przegl(cid:200)darce zainstalowanej na komputerze i na telefonie komórkowym W wersji przeznaczonej do wy(cid:258)wietlania w oknie przegl(cid:200)darki komputero- wej na górze strony pojawia si(cid:218) d(cid:239)ugie, poziome menu, po lewej wy(cid:258)wietlane s(cid:200) odno(cid:258)niki do artyku(cid:239)ów powi(cid:200)zanych, a odsy(cid:239)acze prowadz(cid:200)ce do g(cid:239)ównej za- warto(cid:258)ci strony pojawiaj(cid:200) si(cid:218) w uk(cid:239)adzie siatki. Gdy jednak zapytania o media wykryj(cid:200), (cid:285)e strona zosta(cid:239)a otwarta w w(cid:218)(cid:285)szym oknie, na przyk(cid:239)ad w przegl(cid:200)dar- ce zainstalowanej na telefonie komórkowym, sposób jej wy(cid:258)wietlania zmienia si(cid:218) diametralnie — opcje udost(cid:218)pniania zawarto(cid:258)ci zostaj(cid:200) ukryte, odno(cid:258)niki do M e d i a Q ue r i e s — z a p y t a n i a o m e d i a 31 Poleć książkęKup książkę powi(cid:200)zanych artyku(cid:239)ów równie(cid:285) znikaj(cid:200) z ekranu, a zawarto(cid:258)(cid:202) strony g(cid:239)ównej zostaje wy(cid:258)wietlona w jednej kolumnie, co wspó(cid:239)gra doskonale z nawigowaniem wewn(cid:200)trz telefonu, polegaj(cid:200)cym przede wszystkim na przewijaniu zawarto(cid:258)ci strony w dó(cid:239) i w gór(cid:218). Oczywi(cid:258)cie obecnie strony WWW s(cid:200) wy(cid:258)wietlane nie tylko na komputerach i telefonach komórkowych. Oznacza to, (cid:285)e powinni(cid:258)my do(cid:239)o(cid:285)y(cid:202) wszelkich stara(cid:241), by ostatecznie wszystkie strony internetowe zosta(cid:239)y przygotowane do wy(cid:258)wietlania na dowolnym urz(cid:200)dzeniu. Wi(cid:218)cej na ten temat znajdziesz w ramce „Dynamiczny uk(cid:239)ad strony” poni(cid:285)ej. Je(cid:258)li chcesz si(cid:218) przekona(cid:202), jak ludzie wykorzystuj(cid:200) mo(cid:285)liwo(cid:258)ci modu(cid:239)u za- pyta(cid:241) o media, zapoznaj si(cid:218) z zawarto(cid:258)ci(cid:200) wspania(cid:239)ej galerii dost(cid:218)pnej na stronie http://mediaqueri.es/. Znajdziesz tam kilka naprawd(cid:218) niezwykle interesuj(cid:200)cych przyk(cid:239)adów tego, o czym tu pisz(cid:218). DYNAMICZNY UK(cid:146)AD STRONY W 2010 roku Ethan Marcotte napisa(cid:239) artyku(cid:239) zatytu(cid:239)owany Responsive Web De- sign (http://alistapart.com/article/responsive-web-design/), w którym nad wyraz sprawnie przedstawi(cid:239) wspó(cid:239)czesne pogl(cid:200)dy na temat tworzenia stron inter- netowych tak, by ich wygl(cid:200)d przystosowywa(cid:239) si(cid:218) do mo(cid:285)liwo(cid:258)ci urz(cid:200)dzenia, na którym s(cid:200) wy(cid:258)wietlane. Oto co mo(cid:285)emy przeczyta(cid:202) w tym artykule: Dzi(cid:258) bardziej ni(cid:285) kiedykolwiek mamy w pami(cid:218)ci, (cid:285)e wyniki naszej pracy b(cid:218)- d(cid:200) ogl(cid:200)dane na ró(cid:285)nych urz(cid:200)dzeniach. Projektowanie dynamiczne, reaguj(cid:200)ce na zmieniaj(cid:200)ce si(cid:218) warunki otoczenia, pozwala nam wreszcie „tworzy(cid:202) na dobre i na z(cid:239)e”. Od czasu pojawienia si(cid:218) tego artyku(cid:239)u projektowanie dynamiczne sta(cid:239)o si(cid:218) norm(cid:200). Dzi(cid:258) wi(cid:218)kszo(cid:258)(cid:202) projektantów stron internetowych ma na uwadze mnogo(cid:258)(cid:202) dost(cid:218)pnych urz(cid:200)dze(cid:241) wyj(cid:258)ciowych, przygotowuje wi(cid:218)c swoje stro- ny tak, by zachowywa(cid:239)y si(cid:218) na nich w(cid:239)a(cid:258)ciwie. Równie(cid:285) stare strony s(cid:200) coraz cz(cid:218)(cid:258)ciej dostosowywane do nowych standardów. Tego rodzaju podej(cid:258)cie wymaga pewnych dodatkowych zabiegów — szczególnie starannie rozwa(cid:285)a si(cid:218) wszystkie za i przeciw zw(cid:239)aszcza w przypadku projektowania ca(cid:239)ych witryn, bo wi(cid:218)kszo(cid:258)(cid:202) dost(cid:218)pnych narz(cid:218)dzi nadal nie umo(cid:285)liwia (cid:239)atwego tworzenia dynamicznie zmieniaj(cid:200)cych si(cid:218) stron — ale mo(cid:285)emy powiedzie(cid:202), (cid:285)e powoli d(cid:200)(cid:285)ymy do osi(cid:200)gni(cid:218)cia celu, jakim jest internet dost(cid:218)pny dla ka(cid:285)dego i wsz(cid:218)- dzie, niezale(cid:285)nie od tego, jakim urz(cid:200)dzeniem do przegl(cid:200)dania jego zasobów pos(cid:239)ugiwa(cid:239)by si(cid:218) u(cid:285)ytkownik. Sk(cid:239)adnia Integraln(cid:200) cz(cid:218)(cid:258)ci(cid:200) zapytania o media jest parametr (a czasami ca(cid:239)y ich zestaw) umo(cid:285)liwiaj(cid:200)cy okre(cid:258)lenie, który zestaw regu(cid:239) stylów CSS nale(cid:285)y wczyta(cid:202) dla danego urz(cid:200)dzenia. O wyborze decyduj(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci urz(cid:200)dzenia, a konkretnie to, czy odpowiadaj(cid:200) warto(cid:258)ciom podanym w zestawie parametrów. Zapytania o media 32 R o z d z i a (cid:239) 2 Poleć książkęKup książkę stosuje si(cid:218) na jeden z trzech sposobów odpowiadaj(cid:200)cych sposobom wprowadzania stylów CSS do dokumentu. Pierwszy z nich polega na wywo(cid:239)aniu zewn(cid:218)trznego arkusza stylów za pomoc(cid:200) znacznika link: link href= plik rel= stylesheet media= wyra(cid:285)enie-logiczne wyj(cid:258)cie and (wyra(cid:285)enie) Drugim sposobem jest wywo(cid:239)anie zewn(cid:218)trznego arkusza stylów przy u(cid:285)yciu polecenia @import: @import url( plik ) wyra(cid:285)enie-logiczne wyj(cid:258)cie and (wyra(cid:285)enie); Trzeci sposób polega na wprowadzeniu zapytania o media wewn(cid:200)trz osa- dzonego znacznika stylu lub z arkusza za pomoc(cid:200) rozszerzonej regu(cid:239)y @media: @media wyra(cid:285)enie-logiczne wyj(cid:258)cie and (wyra(cid:285)enie) { regu(cid:239)y } Z tej w(cid:239)a(cid:258)nie metody b(cid:218)d(cid:218) korzysta(cid:202) do ko(cid:241)ca rozdzia(cid:239)u, poniewa(cid:285) (cid:239)atwiej demonstruje si(cid:218) za jej pomoc(cid:200) pewne koncepcje. To, z której metody skorzy- stasz Ty, b(cid:218)dzie zale(cid:285)e(cid:202) g(cid:239)ównie od Twoich preferencji oraz od wymogów na- rzuconych przez istniej(cid:200)c(cid:200) struktur(cid:218) arkuszy stylów. Skoro przedstawi(cid:239)em ju(cid:285) metody wskazywania medium, zajm(cid:218) si(cid:218) teraz omówieniem sk(cid:239)adni. Atrybut media powinien by(cid:202) Ci znany — s(cid:239)u(cid:285)y deklaro- waniu rodzaju medium, do którego nale(cid:285)y zastosowa(cid:202) odpowiedni zestaw arkuszy stylów, jak na przyk(cid:239)ad w tym znaczniku HTML link: link href= style.css rel= stylesheet media= screen Najcz(cid:218)(cid:258)ciej spotykanymi warto(cid:258)ciami przyjmowanymi przez atrybut media s(cid:200) screen i print. Obecnie stosowana sk(cid:239)adnia pozwala podawa(cid:202) je w postaci listy oddzielanej przecinkami. Wtedy w jednym wyra(cid:285)eniu mo(cid:285)na poda(cid:202) kilka zapy- ta(cid:241) (to jednak staje si(cid:218) coraz mniej stosowanym rozwi(cid:200)zaniem, poniewa(cid:285) inne rodzaje mediów wychodz(cid:200) z u(cid:285)ycia). Je(cid:258)li pominiemy rodzaj medium, atrybut media przyjmie domy(cid:258)ln(cid:200) warto(cid:258)(cid:202) all, tak wi(cid:218)c gdy uk(cid:239)adasz w(cid:239)a(cid:258)nie regu(cid:239)(cid:218), która ma odnosi(cid:202) si(cid:218) do wszystkich rodzajów mediów, nie musisz wyszczególnia(cid:202) ich w konstruktorze zapytania. Podane ni(cid:285)ej przyk(cid:239)ady zadzia(cid:239)aj(cid:200) tak samo: @media all and (wyra(cid:285)enie) { regu(cid:239)y } @media (wyra(cid:285)enie) { regu(cid:239)y } UWAGA Aby przyk(cid:239)adowy kod w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki mia(cid:239) bardziej spójn(cid:200) posta(cid:202), tam, gdzie b(cid:218)dzie to mo(cid:285)liwe, b(cid:218)d(cid:218) pomija(cid:202) rodzaj mediów. M e d i a Q ue r i e s — z a p y t a n i a o m e d i a 33 Poleć książkęKup książkę Pierwszym z nowych atrybutów regu(cid:239)y @media jest wyra(cid:285)enie-logiczne. Przyj- muje on warto(cid:258)(cid:202) jednego z dwóch dopuszczalnych s(cid:239)ów kluczowych — only lub not — i jest parametrem opcjonalnym. @media only wyj(cid:258)cie and (wyra(cid:285)enie) { regu(cid:239)y } @media not wyj(cid:258)cie and (wyra(cid:285)enie) { regu(cid:239)y } Warto(cid:258)(cid:202) only wykorzystuje si(cid:218) przede wszystkim do ukrywania regu(cid:239)y przed starszymi wersjami przegl(cid:200)darek, w których sk(cid:239)adnia ta nie zosta(cid:239)a wdro(cid:285)ona. Przegl(cid:200)darki j(cid:200) rozpoznaj(cid:200)ce ignoruj(cid:200) atrybut o warto(cid:258)ci only. Warto(cid:258)(cid:202) not s(cid:239)u(cid:285)y do zanegowania zapytania. U(cid:285)ywa si(cid:218) jej, by zastosowa(cid:202) okre(cid:258)lone regu(cid:239)ami style, je(cid:258)li atrybuty urz(cid:200)dzenia wyj(cid:258)ciowego nie odpowiadaj(cid:200) li(cid:258)cie podanej w poleceniu. Je(cid:258)li u(cid:285)yjesz w zapytaniu atrybutów wyra(cid:285)enie-logiczne lub wyj(cid:258)cie, b(cid:218)- dziesz musia(cid:239) wprowadzi(cid:202) do niego tak(cid:285)e operator and, co pokazuj(cid:200) zreszt(cid:200) po- przednie przyk(cid:239)ady. Operator ten pozwala (cid:239)(cid:200)czy(cid:202) atrybuty z odpowiednim atry- butem wyra(cid:285)enie. Atrybut ten s(cid:239)u(cid:285)y do okre(cid:258)lania parametrów, których dzia(cid:239)anie wychodzi poza funkcje oferowane przez atrybut wyj(cid:258)cie. Wspomniane parametry okre(cid:258)lane s(cid:200) wspóln(cid:200) nazw(cid:200) cech mediów, i to w(cid:239)a(cid:258)nie one decyduj(cid:200) o tym, (cid:285)e za- pytania o media s(cid:200) tak pot(cid:218)(cid:285)nym narz(cid:218)dziem. Pora zatem przyjrze(cid:202) si(cid:218) im z bliska. Cechy mediów Cechy mediów przechowuj(cid:200) informacje dotycz(cid:200)ce urz(cid:200)dze(cid:241), na których wy- (cid:258)wietlana jest strona internetowa: ich wymiary, rozdzielczo(cid:258)(cid:202) i tym podobne. Informacje te s(cid:200) wykorzystywane do okre(cid:258)lania warto(cid:258)ci wyra(cid:285)enia wyra(cid:285)enie, a uzyskany w ten sposób wynik staje si(cid:218) podstaw(cid:200) do wybrania odpowiedniej regu(cid:239)y stylu. Wyra(cid:285)enie wyra(cid:285)enie mo(cid:285)e przekazywa(cid:202) na przyk(cid:239)ad nast(cid:218)puj(cid:200)cy komunikat: „zastosuj te style tylko, je(cid:258)li ekran urz(cid:200)dzenia jest szerszy ni(cid:285) 480 pikseli albo tylko je(cid:258)li urz(cid:200)dzenie jest ustawione poziomo”. Wi(cid:218)kszo(cid:258)(cid:202) wyra(cid:285)e(cid:241) pojawiaj(cid:200)cych si(cid:218) w zapytaniach o media wymaga podania pewnej warto(cid:258)ci: @media (cecha: warto(cid:258)(cid:202)) { regu(cid:239)y } Warto(cid:258)(cid:202) ta jest niezb(cid:218)dna do u(cid:239)o(cid:285)enia przyk(cid:239)adowych wyra(cid:285)e(cid:241), jakie poda(cid:239)em nieco wcze(cid:258)niej. Istniej(cid:200) jednak przypadki, w których mo(cid:285)na j(cid:200) pomin(cid:200)(cid:202) i spraw- dzi(cid:202) jedynie, czy medium charakteryzuje si(cid:218) konkretn(cid:200) cech(cid:200). Wtedy otrzymuje- my wyra(cid:285)enie: @media (cecha) { regu(cid:239)y } 34 R o z d z i a (cid:239) 2 Poleć książkęKup książkę Kwestia wyra(cid:285)e(cid:241) wyja(cid:258)ni si(cid:218) na pewno, gdy zaczn(cid:218) omawia(cid:202) konkretne ce- chy mediów oraz gdy powiem, które warto(cid:258)ci s(cid:200) konieczne do dzia(cid:239)ania strony, a z których mo(cid:285)na zrezygnowa(cid:202). Skoro poznali(cid:258)my ju(cid:285) tajniki sk(cid:239)adni, pora zaj(cid:200)(cid:202) si(cid:218) najwa(cid:285)niejszymi cechami mediów. Te, o których b(cid:218)d(cid:218) teraz opowiada(cid:202), odnosz(cid:200) si(cid:218) przede wszystkim do kolorowych wy(cid:258)wietlaczy, na których najcz(cid:218)(cid:258)ciej przegl(cid:200)damy zawarto(cid:258)(cid:202) sieci. Istniej(cid:200) te(cid:285) inne cechy mediów, ale b(cid:218)dziesz je wykorzystywa(cid:202) g(cid:239)ównie do obs(cid:239)ugi innych mediów, na przyk(cid:239)ad telewizorów czy terminali o ustalonych sztywno para- metrach (o ile urz(cid:200)dzenia te w ogóle pozwol(cid:200) na korzystanie ze wspomnianych cech). Szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202) Cecha width opisuje szeroko(cid:258)(cid:202) pola rysowania zawarto(cid:258)ci dla okre(cid:258)lonego ro- dzaju medium, co w praktyce przek(cid:239)ada si(cid:218) na szeroko(cid:258)(cid:202) okna przegl(cid:200)darki (ra- zem z polem paska przewijania) zainstalowanej w systemie komputera. Podsta- wowa sk(cid:239)adnia wymaga podania d(cid:239)ugo(cid:258)ci: @media (width: 600px) { regu(cid:239)y } W tym przypadku regu(cid:239)y znajd(cid:200) zastosowanie tylko w tych przegl(cid:200)darkach, których okno b(cid:218)dzie mia(cid:239)o dok(cid:239)adnie 600 pikseli szeroko(cid:258)ci, co oczywi(cid:258)cie jest zbyt szczegó(cid:239)owym okre(cid:258)leniem warunku. Cecha width przyjmuje te(cid:285) jeden z dwóch przedrostków: max- lub min-, które pozwalaj(cid:200) o
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS3. Podręcznik nowoczesnego webdevelopera
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: