W tym odcinku trochę notatek o CSS3, o wykrywaniu wsparcia dla funkcjonalności HTML5 w przeglądarkach , o manifeście aplikacji HTML5 i jej cachowaniem oraz o funkcjonalności geolokalizacji.
Visual Studio 2010 SP1 –> Extension Manager –> Web Standards Update for Microsoft Visual Studio = obsługa intellisense dla HTML5 & CSS3 oraz zaktualizowana walidacja JS z uwzględnieniem nowego API (o możliwościach Visual Studio 11 w kontekście HTML5 napiszę innym razem)
File –> Export Template (z bieżącej strony HTML5 można utworzyć sobie szablon)
W każdym bloku semantycznym <h1>
Na stronie może być odtwarzanych wiele plików multimedialnych jednocześnie.
<canvas>Twoja przeglądarka … </canvas> - prosty fallback
<figure> - obrazek, video, canvas
Na znacznikach <input> można też ustawiać istniejący już wcześniej atrybut title.
Można łączyć grafikę i animacje z canvas z obrazem video, co może dawać ciekawe efekty.
<meter min=”1” max=”31” value=”5”>Piąty dzień</meter>
<input type=”tel” pattern=””/>
CSS3
Nowości
- czcionki
- cienie
- zaokrąglone rogi
- gradienty
- łatwiejszy layout
- transformaty
- …
@charset ‘utf-8’; - pierwsza linijka w pliku .css w CSS3
Czcionki
@font-face {
font-family: Michroma;
src: url(../fonts/michroma-webfont.woff);
}
body {
font-family: Michroma;
}
Kolory
::selection, ::-moz-selection {
background-color: rgba(122, 134, 45, 0.3);
}
Cienie
h1 {
text-shadow: 2px 2px 2px #000;
}
.linkbutton {
-moz-box-shadow: 5px 5px 8px #000;
-webkit-box-shadow: 5px 5px 8px #000;
-o-box-shadow: 5px 5px 8px #000;
box-shadow: 5px 5px 8px #000;
}
Uaktualnienia webowe Visual Studio 2010 dla CSS3:
- intellisense
- podgląd kolorów
- Add vendor specific properties (uzupełnianie stylu o properties poszczególnych dostawców przeglądarek)
Zaokrąglone rogi
.linkbutton {
border-radius: 10px;
}
Gradienty
.linkbutton {
background: -ms-linear-gradient(bottom, #c34000 23%, #ff5400 62%);
background: -moz-linear-gradient(bottom center, #c34000 23%, #ff5400 62%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.23, #c34000), color-stop(0.62, #ff5400));
}
Transformaty
mark {
-ms-transform: scaleX(-1.5) rotate(-4deg);
-moz-transform: scaleX(-1.5) rotate(-4deg);
-webkit-transform: scaleX(-1.5) rotate(-4deg);
-o-transform: scaleX(-1.5) rotate(-4deg);
transform: scaleX(-1.5) rotate(-4deg);
}
Form inputs
- input.data:required
- input.data:focus
Obsługa wielu przeglądarek
Informowanie użytkownika, że dana funkcjonalność nie jest wspierana w jego przeglądarce:
fallbacks - w tagach tj. <audio>, <video>, <canvas>
w funkcjach np.
function supports_canvas() {
return !!document.createElement(‘canvas’).getContext;
}
modernizr.custom.js - np. Modernizr.canvas;
Aplikacje off-line
Browser events + Application Cache
Anatomia
- Cache Manifest
- CACHE MANIFEST
- #version 1
- CACHE: lista plików na lokalnej maszynie
- NETWORK: lista adresów/plików wykluczonych z cachowania
- FALLBACK: alternatywna strony dla podanych stron przy off-line
- //Mime Type: text/cache-manifest
- //Encoding: utf-8
<html manifest=”manifest.aspx”></html>
Nie łączymy cache przeglądarki z cache’m aplikacji!
Zdarzenia
- First load: Checking, Downloading, Progress, Cached
- Not Updated: Checking, No Update
- Updated: Checking, Downloading, Progress, Cached
Odświeżanie plików tylko przy zmianie manifestu! Nie ma wykrywania zmian w plikach.
Stany cache
0 - UNCACHED (niezainicjowany)
1 - IDLE (w danym momencie nieaktualizowany)
2 - CHECKING (szukanie manifestu dla ustalenia zmian)
3 - DOWNLOADING (pobieranie plików z manifestu do przeglądarki)
4 - UPDATEREADY (wszystkie pliki z manifestu zostały pobrane)
5 - OBSOLETE (zawartość cache zestarzała się i wymaga ponownego pobrania)
window.applicationCache
- onchecking
- oncached
- onnoupdate
- onobsolete
- ondownloading
- onupdateready
- onerror
- swapCache()
Odświeżanie strony ręczne lub automatyczne po odświeżeniu cache: location.reload()
Wykrywanie on-line/off-line:
- navigator.onLine
- window.addEventListener(“online”, …, true)
- window.addEventListener(“offline”,…, true)
Pliki z manifestu cache jako pakiet, błąd w jednym powoduje błąd strony
Geolokalizacja
Opcje:
- High Accuracy
- Timeout
- Maximum Age
Dialog o pozwolenie w przeglądarce
navigator.geolocation.getCurrentPosition(showPosition, positionError);
function showPosition(position) {
var coords = position.coords; ….
}
position.coords
- latitude
- longitude
- accuracy - 95%,
- altitude - wysokość urządzenia w m
- altitudeAccuracy - m
- heading - kierunek w stopniach względem północy
- speed - m/s
- timestamp - czas i data pomiaru
watchID = navigator.geolocation.watchPosition(showPosition, positionError);
nawigator.geolocation.clearWatch(watchID);
var options = { enableHighAccuracy: true, timeout: 10000, maximumAge: 1000 };
navigator.geolocation.getCurrentPosition(showPosition, positionError, options);
Posty
Brak komentarzy:
Prześlij komentarz