Opera Developer News - How media queries allow you to optimize SVG icons for several sizes
5 weeks ago by sunpig
One thing that seems to come up from time to time when talking about SVG is the apparent lack of a mechanism to make certain size specific adjustments. Typical use case is icon design, where you want to make sure the outline of the icon you're creating is always 1px, regardless of the icon being 16, 32 or 64 pixels in size. While at the SVG Open conference last week, I investigated how this problem could be solved, and found out that you can do this by using media queries inside the SVG file. Different widths set on the img tag pointing to the SVG file then will trigger different max-width/min-width media queries to be triggered. I've presented my findings during the lightning talks session at SVG Open, and have turned the talk into a YouTube video, which you can watch below.
andreasbovens
opera
svg
mediaquery
media
query
design
responsive
layout
mobile
5 weeks ago by sunpig
How Lanyrd Uses HTML5 for a Great Mobile Web App
january 2012 by sunpig
"The site works as expected without JavaScript" Yeah baby
lanyrd
mobile
web
app
html5
js
opera
mini
webdev
browser
progressive
enhancement
from twitter
january 2012 by sunpig
Mobile Web: Taiwan, Opera and WebOS
september 2011 by sunpig
@xBora Here's that article on mobile web in Taiwan:
paulrouget
mobile
web
opera
mini
taiwan
phone
app
mozilla
september 2011 by sunpig
The State of (Mobile) Web Development 2011 | Web Directions
may 2011 by sunpig
RT @mahemoff: State of Mobile Web Development 2011 from @webdirections
webdirections
mobile
web
app
development
statistics
html
iphone
android
opera
may 2011 by sunpig
related tags
3d ⊕ accelerometer ⊕ access ⊕ accessibility ⊕ activedescendant ⊕ adaptive ⊕ adoption ⊕ advice ⊕ ala ⊕ alistapart ⊕ alternative ⊕ andreasbovens ⊕ android ⊕ api ⊕ app ⊕ appcache ⊕ applicationcache ⊕ audio ⊕ blackberry ⊕ blur ⊕ browser ⊕ browsers ⊕ browserstatistics ⊕ brucel ⊕ brucelawason ⊕ brucelawson ⊕ c ⊕ camera ⊕ canvas ⊕ caption ⊕ capture ⊕ cern ⊕ chadorzel ⊕ chart ⊕ chrismessina ⊕ chrismills ⊕ chrome ⊕ client ⊕ code ⊕ command ⊕ compatibility ⊕ config ⊕ console ⊕ control ⊕ css ⊕ data ⊕ debug ⊕ debugging ⊕ decay ⊕ design ⊕ dev ⊕ developer ⊕ development ⊕ device ⊕ dom ⊕ dragonfly ⊕ editor ⊕ emulator ⊕ enhancement ⊕ experiment ⊕ extension ⊕ feedback ⊕ file ⊕ firebug ⊕ firefox ⊕ focus ⊕ form ⊕ free ⊕ frontend ⊕ frontent ⊕ getusermedia ⊕ graph ⊕ graphics ⊕ gum ⊕ hakonlie ⊕ handheld ⊕ handset ⊕ html ⊕ html5 ⊕ html5doctor ⊕ ie ⊕ infinitebrowserversion ⊕ input ⊕ inspector ⊕ interoperability ⊕ iphone ⊕ javascript ⊕ js ⊕ keyboard ⊕ klauskomenda ⊕ lanyrd ⊕ layout ⊕ leverage ⊕ light ⊕ magazine ⊕ management ⊕ markup ⊕ media ⊕ mediaquery ⊕ microsoft ⊕ mini ⊕ mobile ⊕ model ⊕ mozilla ⊕ narrow ⊕ net ⊕ netfront ⊕ network ⊕ neutrino ⊕ nokia ⊕ object ⊕ offline ⊕ openwave ⊕ opera ⊖ optimization ⊕ particle ⊕ paulrouget ⊕ pda ⊕ peer ⊕ philo ⊕ phone ⊕ physics ⊕ pingdom ⊕ platform ⊕ ppk ⊕ programming ⊕ progressive ⊕ properties ⊕ query ⊕ quirksmode ⊕ rate ⊕ remote ⊕ responsive ⊕ roaming ⊕ safari ⊕ science ⊕ screen ⊕ secret ⊕ server ⊕ settings ⊕ setup ⊕ small ⊕ smallscreen ⊕ social ⊕ software ⊕ speed ⊕ standards ⊕ statistics ⊕ strategy ⊕ stream ⊕ svg ⊕ synergy ⊕ tab ⊕ tabindex ⊕ taiwan ⊕ tech ⊕ testing ⊕ threejs ⊕ tips ⊕ toddkloots ⊕ tools ⊕ tutorial ⊕ unite ⊕ upgrade ⊕ usability ⊕ version ⊕ video ⊕ viewport ⊕ w3c ⊕ wac ⊕ web ⊕ webapp ⊕ webdev ⊕ webdirections ⊕ webgl ⊕ webkit ⊕ webstandards ⊕ whatwg ⊕ widget ⊕ width ⊕ windows ⊕ xml ⊕ yahoo ⊕ yui ⊕Copy this bookmark: