Chaos Sanctuary

Ještě včera jsem byla lama zcela normální ale dnes, dnes je všechno jinak, milý deníčku. Dnes jsem si na alistapart.com přečetla článek Return of the Mobile Style Sheet.

Píšou tam, že mobily nám na webíky nakukujou čím dál víc a že je tedy potřeba jim to usnadnit, a to nejlépěji pomocí oddělených CSS stylů. Problém je v tom, že si každý mobil dělá, co chce, některé čtou styly pro screen a handheld, některé jen hanheld, některé jen screen s media query support a některé jen screen bez media query.

CSS media query je pokročilá vlastnost stylů, kterou zatím interpretuje jen Safari a Opera mini, která umožňuje nadefinovat kromě volby jako „screen“ nebo „print“, i další kriteria, např velikost obrazovky, v článku je uveden tento příklad:

<link rel="stylesheet" href="handheld.css" 
media="only screen and (max-device width:480px)"/>

V článku v sekci „How browsers behave“ je tabulka, která ukazuje, jaké styly různé mobilní browsery čtou. Člověk se pak začne ptát, kolik těch mobilních stylů vlastně potřebuje. Některé CSS vlastnosti by se ve stylech pro mobily neměly vyskytovat, speciálně tam zmiňují padding a margin, float a display a background-image.

Jak to tedy udělat.

• Udělat styl pro screen, který budou číst browsery pro PC.
• Pak udělat styl „antiscreen“, který zruší mobilně nepřátelské CSS vlastnosti a tyhle dva styly se „zimportují“ do jednoho, který nazvali core.css, takto:
  

  @import url("screen.css"); 
  @import url("antiscreen.css") handheld; 
  @import url("antiscreen.css") only screen and
  (max-device-width:480px);

• Pak nadefinují ještě styl pro hanheld, jak by to mělo vypadat a přidají ho ke stylům např takto:
  

  <link rel="stylesheet" href="core.css" media="screen"/> 
  <link rel="stylesheet" href="handheld.css" media="handheld,
  only screen and (max-device-width:480px)"/>

V článku následuje tabulka, která ukazuje, jak tenhle mišmaš jednotlivé browsery zinterpretují. Prý dobře. Ale problém je, že když máte CSS dlouhý a často do něho děláte změny, je obtížné udržovat k tomu ještě ten antiscreen.

Další navržené postupy, jak browseru podstrčit to správné krmení, jsou pomocí javascriptu nebo server-side řešení založené na testování user agent.

Proč o tom píšu právě teď, když doposud mě mobily nechávaly ledově klidnou? Ále, zas vymýšlím změny na webíku a vzpomněla jsem si, jak mě kdysi na munio kritizovali, tak teď bych s tím začla (řekněme po zralé ... ehm ... časově uleželé ... úvaze) něco dělat. Taky tam psali, že nejlepší mobilní CSS handheld má snizekweb, tak jsem ho samozřejmě proslídila ale ono je to dlouhé! A funguje to opravdu na ty případy, které tak složitě rozebírají na alistapart?

Já su jen prostá líná lama, já chcu něco easy. Tak jsem pojala ideu:
Udělám css screen, pak handheld, kde naplácám do všech sekcí position:static, margin, padding:0 a nadefinuju pozadí a barvu linků, ať to připomíná „ducha“ webu, čímž splácnu dohromady antiscreen a handheld. A tohle tam dám jako hanheld a ještě jednou jako handheld s media query.

Ale nemám žádný mobil na prohlížení webu v dohledné době ani potřebu něco takového vlastnit. Existuje webová nemobilní služba, jak takové styly otestovat?