[WSG] Testing styling availability when using JavaScript
Hi All,
Is there any advantage to testing the availability of styling before running
scripts?
The scenario I'm thinking of is JS available but no CSS, either unavailable or
switched off.
Something like:
var cssOn;
var gotStyle=function(){
function init(){
// Simon Willisons - http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(f){var o=window.onload;if(typeof
window.onload!='function'){window.onload=f;}else{window.onload=function(){if(o){o();}f();};}}
// mike foskett -
http://websemantics.co.uk/resources/useful_javascript_functions/
function hasCSS(){var
d=document.createElement('div');d.id=hasCSS;document.body.appendChild(d);var
o=document.getElementById(hasCSS),v=false;if(window.getComputedStyle){v=(window.getComputedStyle(o,null).getPropertyValue('display')==='none');}else{if(o.currentStyle){v=(o.currentStyle.display==='none');}}document.body.removeChild(d);return
v;}
addLoadEvent(function(){
cssOn=hasCSS();
});
}
return{
init:init
};
}();
gotStyle.init();
In the CSS:
#hasCSS {display:none}
The above:
1. waits for page load
2. appends a test element
3. applies a style to it
4. tests for the applied style
5. sets the global variable accordingly
6. removes the test element
Regards,
Mike
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] @media ordering in stylesheet
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given the
following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
Googling around, I've not found a clear answer to the question. So, any help is
appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] @media ordering in stylesheet
No, the last one overrides the ones before it.
Kevin
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Jody Tate
Sent: Thursday, August 05, 2010 1:21 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] @media ordering in stylesheet
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given the
following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
Googling around, I've not found a clear answer to the question. So, any
help is appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media ordering in stylesheet
On 5 Aug 2010, at 19:20, Jody Tate wrote:
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given
the following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
No. the @media all will apply (well if there were any valid rules in
the block). If the specificity is the same (as is the case in this
example) and the query conditions both apply then source order wins.
Googling around, I've not found a clear answer to the question. So,
any help is appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
David Storey
Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG: Mobile Web Best Practices / SVG Interest Group
Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: dsto...@opera.com / Twitter:
dstorey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media ordering in stylesheet
Hey Jody,
First of all, the rules are incorrectly written. you need to include a
property in front of the value:
@media print
{
body { color: #FF; }
}
@media all
{
body { color: #99; }
}
Secondly, the winner is the second rule. @media rules are just
containers for a bunch of rules. They have no control over the
cascade. The important thing here is the order they are written.
For printers you specify white text. Then for all devices (including
printers) you specify a dark red text. The second rule wins due the
the rules of the cascade:
both rules are from the same origin (author)
both rules have the same !important (none applied)
both rules have the same specificity (selector weight)
Therefore, the order that they are written in is the key and the last
rule specified will win.
Thanks
Russ
--
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: r...@maxdesign.com.au
Skype: russ-maxdesign
MSN: r...@maxdesign.com.au
Website: http://www.maxdesign.com.au/
Twitter: http://twitter.com/russmaxdesign
Linkedin: http://www.linkedin.com/in/russweakley
Slideshare: http://www.slideshare.net/maxdesign/
--
On 06/08/2010, at 3:20 AM, Jody Tate wrote:
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given
the following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
Googling around, I've not found a clear answer to the question. So,
any help is appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media ordering in stylesheet
Thanks for the responses. I needed the experts in the group to confirm my suspicions. Best, jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] @media ordering in stylesheet
wow - three answers for the price of one :) On 06/08/2010, at 3:45 AM, David Storey wrote: No. the @media all will apply (well if there were any valid rules in the block). If the specificity is the same (as is the case in this example) and the query conditions both apply then source order wins. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] :: opera mini 5.1 ::
markup http://chelseacreekstudio.com/site/portfolio/01.php css around line 669 http://chelseacreekstudio.com/site/css/sisu.css The image does not fill the width of the window in Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1 nor in the Opera Mini Simulator. http://www.opera.com/mobile/demo/ What to do? aside It does fill the window in Mac OS X 10.4 at 600, 480, and 400. And it fills the window in the iPhoney Simulator... /aside Best, ~d -- http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
Hi David,
Having done 2 full sites+ many exercise mobile sites, I view at Opera Mini
(including the Mobile 10) the Internet Explorer 6+7, it's a browser one will
hate it, curse it more than praise it :-(
I think the problem might be this:
body#p #main img {border: 3px solid red;display: block;
max-width : 96% !important;
height : auto !important;
margin : 20px 0 0 0;
}
Should it not be body#p, #main img?
Apart for this, I don't think it's a good idea to declare max-width for any
mobile browsers, be it container or inline image. This rule you have should
take care of the width for portrait and landscape view:
@media handheld, screen and (max-width: 480px), screen and (max-device-width:
480px)
In my iPod Opera Mobile 10, your site results horizontal scrolling, you might
want to overwrite all the EM declared in (max)widths to % in your @media.
A side note , next time you might want to post a tinyURL or bit.ly (I like
this!) address if ask mobile browser check because typing on a tiny screen
keypad on a tiny screen for a long url address is no fun :-) Some mobile
emulators do not allow copy and paste either.
tee
On Aug 5, 2010, at 11:27 AM, David Laakso wrote:
markup
http://chelseacreekstudio.com/site/portfolio/01.php
css
around line 669
http://chelseacreekstudio.com/site/css/sisu.css
The image does not fill the width of the window in
Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1
nor in the Opera Mini Simulator.
http://www.opera.com/mobile/demo/
What to do?
aside
It does fill the window in Mac OS X 10.4 at 600, 480, and 400.
And it fills the window in the iPhoney Simulator...
/aside
Best,
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] :: opera mini 5.1 ::
On Thu, 05 Aug 2010 19:27:24 +0100, David Laakso da...@chelseacreekstudio.com wrote: markup http://chelseacreekstudio.com/site/portfolio/01.php css around line 669 http://chelseacreekstudio.com/site/css/sisu.css The image does not fill the width of the window in Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1 nor in the Opera Mini Simulator. http://www.opera.com/mobile/demo/ What to do? aside It does fill the window in Mac OS X 10.4 at 600, 480, and 400. And it fills the window in the iPhoney Simulator... /aside Best, ~d Only an old Nokia N80 to test on. Messed with Opera Mini settings and the only way to get the image to display at larger than mini size was to set Image Quality to High, but then it did not respect the screen width. Doesn't seem to provide any clues I'm afraid. Best wishes Duncan *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
tee wrote:
Hi David,
I think the problem might be this:
body#p #main img {border: 3px solid red;display: block;
max-width : 96% !important;
height : auto !important;
margin : 20px 0 0 0;
}
Should it not be body#p, #main img?
tee
#p is the id for the styles specific to the portfolio pages, so I don't
think your suggestion would work as you've written it -- and, just
#main img {...}
does not work, either.
I have had no difficulty with Opera Mini 5.1 on Sanyo Mirro [ a low-end
device ] whatsoever, other than the problem I wrote about.
A friend checked it on an iPod prior to the inclusion of the @media
declarations and reported no issues at that time. I will ask her to
check it again.
Thanks.
Best,
~d
--
desktop
http://chelseacreekstudio.com/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] :: opera mini 5.1 ::
Duncan Hill wrote: On Thu, 05 Aug 2010 19:27:24 +0100, David Laakso da...@chelseacreekstudio.com wrote: markup http://chelseacreekstudio.com/site/portfolio/01.php Best, ~d Only an old Nokia N80 to test on. Messed with Opera Mini settings and the only way to get the image to display at larger than mini size was to set Image Quality to High, but then it did not respect the screen width. Doesn't seem to provide any clues I'm afraid. Best wishes Duncan Bingo, I bet!!! Image Quality High with max-width re-set to 40% or a little less ought to do it. If you do not hear back from me in an hour or so it is resolved. Thanks! Best, ~d -- http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
I sent you a screenshot taken from Opera Mini directly from iPod using landscape view It might go into your junk box. I am quite certain the image is the result of the max-width declaration in your img and the horizontal scrolling is the product of EM width with the combination of max-width. Opera mobile 10 emulator doesn't has the same issue though, but then I have learned to never trust the emulator from day one. tee A friend checked it on an iPod prior to the inclusion of the @media declarations and reported no issues at that time. I will ask her to check it again. Thanks. Best, ~d *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
tee wrote: I sent you a screenshot taken from Opera Mini directly from iPod using landscape view It might go into your junk box. I am quite certain the image is the result of the max-width declaration in your img and the horizontal scrolling is the product of EM width with the combination of max-width. Opera mobile 10 emulator doesn't has the same issue though, but then I have learned to never trust the emulator from day one. tee Got the iPod screenshot, thanks -- will look into it. The image issue has been resloved in the Opera Mini Simulator and in the Sany Mirro handset [a low-end device] with Duncan's suggestion of setting Image Quality High. This makes the image from too narrow to too wide. I changed the CSS as follows to reduce the image width: /* was 96% */ http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
David Laakso wrote:
tee wrote:
I sent you a screenshot taken from Opera Mini directly from iPod
using landscape view
It might go into your junk box. I am quite certain the image is the
result of the max-width declaration in your img and the horizontal
scrolling is the product of EM width with the combination of max-width.
Opera mobile 10 emulator doesn't has the same issue though, but then
I have learned to never trust the emulator from day one.
tee
Whoops. Hit send too soon. Here's the rest of it...
Got the iPod screenshot, thanks -- will look into it.
The image issue has been resloved in the Opera Mini Simulator and in the
Sany Mirro handset [a low-end device] with Duncan's suggestion of
setting Image Quality High. This makes the image from too narrow to too
wide.
I changed the CSS as follows to reduce the image width: /* was 96% */
@media handheld, screen and (max-width: 480px), screen and
(max-device-width: 480px) {
body#p #main img {
max-width : 35% !important;
height : auto !important;
}
} /* for Opera Mini 5.1 on SanyoMirro 4 BoostMobile*/
Best,
~d
http://chelseacreekstudio.com/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
desktop
http://chelseacreekstudio.com/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] :: opera mini 5.1 ::
On 5 Aug 2010, at 21:12, tee wrote:
Hi David,
Having done 2 full sites+ many exercise mobile sites, I view at
Opera Mini (including the Mobile 10) the Internet Explorer 6+7, it's
a browser one will hate it, curse it more than praise it :-(
What are your issues with Opera Mobile (Opera Mini has known
restrictions as it is designed for low-end devices which can't power a
full browser; which are the majority of the worlds devices people use
to access the web. Smart phones are only big in the West).
Are you mixing up Mini and Mobile, as you state In my iPod Opera
Mobile 10. Opera Mobile doesn't exist for iPod as Apple do not allow
full browsers on iOS as JavaScript engines bar their own pre-installed
one are banned.
I think the problem might be this:
body#p #main img {border: 3px solid red;display: block;
max-width : 96% !important;
height : auto !important;
margin : 20px 0 0 0;
}
Should it not be body#p, #main img?
Apart for this, I don't think it's a good idea to declare max-width
for any mobile browsers, be it container or inline image. This rule
you have should take care of the width for portrait and landscape
view:
@media handheld, screen and (max-width: 480px), screen and (max-
device-width: 480px)
In my iPod Opera Mobile 10, your site results horizontal
scrolling, you might want to overwrite all the EM declared in
(max)widths to % in your @media.
A side note , next time you might want to post a tinyURL or bit.ly
(I like this!) address if ask mobile browser check because typing on
a tiny screen keypad on a tiny screen for a long url address is no
fun :-) Some mobile emulators do not allow copy and paste either.
tee
On Aug 5, 2010, at 11:27 AM, David Laakso wrote:
markup
http://chelseacreekstudio.com/site/portfolio/01.php
css
around line 669
http://chelseacreekstudio.com/site/css/sisu.css
The image does not fill the width of the window in
Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1
nor in the Opera Mini Simulator.
http://www.opera.com/mobile/demo/
What to do?
aside
It does fill the window in Mac OS X 10.4 at 600, 480, and 400.
And it fills the window in the iPhoney Simulator...
/aside
Best,
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
David Storey
Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG: Mobile Web Best Practices / SVG Interest Group
Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: dsto...@opera.com / Twitter:
dstorey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] :: opera mini 5.1 ::
On Aug 5, 2010, at 2:05 PM, David Storey wrote:
On 5 Aug 2010, at 21:12, tee wrote:
Hi David,
Having done 2 full sites+ many exercise mobile sites, I view at Opera Mini
(including the Mobile 10) the Internet Explorer 6+7, it's a browser one will
hate it, curse it more than praise it :-(
What are your issues with Opera Mobile (Opera Mini has known restrictions as
it is designed for low-end devices which can't power a full browser; .
Are you mixing up Mini and Mobile,
Oops, I must be. Mini and Mobile sounded very much the same browser to me, and
I got an impression that Opera had consolidated the two name from Mini to
Mobile 10 since the version 5.
So the one I been using is Opera Mini 5 in my iPod (should this be called a
smart phone equivalent?) , but it does look to me like a full browser (and with
many quirks).
I have experienced many issues in Opera Mini 5 which took quite a bit of time
to get rid of, some were fixed, but these two are quite stubborn.
1. Pre tag - in portrait view if a line of content is longer than the device
width, it doesn't wrap.
2. padding issue (I think) in the input. If I add a background image like so
and the image has a width of, say, 12px
input {
background: url(search-icon.png) no-repeat left top;
padding: 1px 2px 1px 16px
}
The input has a value of search site, the text should be pushed 16px to the
right. Andriod and Safari obeyed the rule, but Opera Mini ignores the padding
rule which resulting the text and background image overlapped.
I am sure I will find more issues in this browser as I get more opportunities
to work on Mobile version of websites.
I often think Opera desktop has paddings/margins/line-height bug related to EM
and % which seems never fixed, but then it might be Opera way of handling them,
and they are carried over to Mini. A browser that has only 5+% usage (based
from many stats of the sites I did) and offers no browser specific option for
developer to tackle a slight difference that maybe required at time, does make
a web developer hard to love it and embrace it :-)
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] :: opera mini 5.1 ::
1. Pre tag - in portrait view if a line of content is longer than the device width, it doesn't wrap. Correction! Not that it doesn't wrap (can pre tag wrap? I thought not), I think it's the font size (even in % and EM) does not re-adjust like other two do when you switch from Landscape to Portrait and this creates issue with certain html tags. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
On Thu, 05 Aug 2010 21:41:33 +0100, David Laakso
da...@chelseacreekstudio.com wrote:
Whoops. Hit send too soon. Here's the rest of it...
Got the iPod screenshot, thanks -- will look into it.
The image issue has been resloved in the Opera Mini Simulator and in the
Sany Mirro handset [a low-end device] with Duncan's suggestion of
setting Image Quality High. This makes the image from too narrow to too
wide.
I changed the CSS as follows to reduce the image width: /* was 96% */
@media handheld, screen and (max-width: 480px), screen and
(max-device-width: 480px) {
body#p #main img {
max-width : 35% !important;
height : auto !important;
}
} /* for Opera Mini 5.1 on SanyoMirro 4 BoostMobile*/
Best,
~d
I've tried just about every combination of settings on the N80
screen size is 352x416
tried portrait and landscape, it lands in an awkward patch of your @media
values.
Having checked in Opera desktop, which does respond to the @media queries,
and the N80, I have a suspicion that there may be something in your header
that is maintaining a side scroll on the handheld.
Could that be an overflow failure in Mini or a minimum size setting.
Best settings for Portrait or Landscape:
Images: On
Image Quality: High
Font: Medium
Mobile View: Off
Fullscreen: On or Off
Best wishes
Duncan
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] :: opera mini 5.1 ::
On 6 Aug 2010, at 00:48, tee wrote:
On Aug 5, 2010, at 1:41 PM, David Laakso wrote:
Whoops. Hit send too soon. Here's the rest of it...
Got the iPod screenshot, thanks -- will look into it.
The image issue has been resloved in the Opera Mini Simulator and
in the Sany Mirro handset [a low-end device] with Duncan's
suggestion of setting Image Quality High. This makes the image from
too narrow to too wide.
I changed the CSS as follows to reduce the image width: /* was 96% */
@media handheld, screen and (max-width: 480px), screen and (max-
device-width: 480px) {
body#p #main img {
max-width : 35% !important;
height : auto !important;
}
} /* for Opera Mini 5.1 on SanyoMirro 4 BoostMobile*/
If you add this in the above @media rule the horizontal scrolling
will go away.
header, #page {
margin : 0 auto;
width: 100%;
}
I was not aware the Opera Mini image rendering differences in image
quality setting with low, medium and high until Duncan pointed out.
From the mobile user point of view, changing image quality to high
might not be a good approach though. In my iPod, the default quality
is medium, and I assume this is the majority will see in their
Opera Mini.
Some thoughts, not related to the issue you are having, but I think
they are valid points for your mobile users.
A side note, I have just completed the W3C Mobile Best Practice
course taught by Phil, and have learned many practical, useful
skills and knowledges. One of the strong emphasizes Phil taught us,
is to Specify the size of images in markup, if they have an
intrinsic size.
To get a Mobile OK (optimized) site, a page cannot be more than 10K.
That image you have, is 170kb and that you using one style sheet
with media queries to target all devices, if I am a user on the go
who needs to watch over bandwidth and monthly phone bill, I don't
think I would be happy visiting your site.
I was very excited when I first learned how to use media queries
just few months ago, but after the course, I found that just the
media queries will not do if you need to optimized a mobile version
site.
I completed the course with a conclusion that Content negotiation
almost is a must just for one simple reason, using media queries to
display:none only makes the content/element you do not want mobile
user to see off the screen, it does not eliminate the sizes that
slow the page load, eat up user's phone bill.
Not strictly true. First of all Opera Mini compresses the content and
images (which is one of the reasons for the image quality setting - it
will compress it less on high setting) to optimise it for low
bandwidth devices. Opera (in general) also doesn't load resources that
are set to display: none; until they are set to show on the page. Your
mileage may vary with other browsers though. Opera Mini is designed
for feature phones with slow networks that cost per kb. This is why it
is hugely popular across Asia, Africa and South/Central America. It of
course has some trade offs in what it can support using the client
server approach, but those trade offs are worth it for the users, as
the alternatives would be no internet at all or one that costs too much.
Ignoring the strengths of Opera Mini, you can easily use Media Queries
without just using it to override screen styles to hide them for
mobile. For example you can provide two stylesheets; one only for
screen and one only for small screen devices. you can set the media
query to be mutually exclusive so the mobile browser never gets the
stylesheet designed for desktop and thus doesn't have to override the
styles. Or otherwise you can use the default stylesheet to style the
mobile page, and use another stylesheet to override those styles for
desktop. The mobile will then never download those styles.
Depending on the context, it is often best to try to keep the images
linked from the style sheet, rather than in the HMTL (especially if
presentational ) so you can specify an optimised one to the device
based on the media query. This doesn't matter for Opera Mini as it
will optimise it anyway (and not load it if display: none;, but will
benefit less bandwidth-smart browsers and devices.
This site may give you a general idea how much it may cost your
mobile user per page.
http://mobiready.com
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
David Storey
Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG: Mobile Web Best Practices / SVG Interest Group
Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: dsto...@opera.com / Twitter:
dstorey
[WSG] Accessibility in Australia
Is it mandatory for all australian websites to be accessible or does this only apply to government websites? Just a little confused after reading article below which only mentioned government sites. Http://bit.ly/dddhz8 Thanks in advance. Sue On 06/08/2010, at 9:06 AM, Josh Godsiff j...@oxideinteractive.com.au wrote: On 5/8/2010 8:03 PM, Foskett, Mike wrote: The scenario I'm thinking of is JS available but no CSS, either unavailable or switched off. Unless you're working on some sort of project where there's a high likelyhood that that will occur, don't bother - in the real world, the number of people with a JS-on CSS-off configuration is probably less than 0.5%. - Josh Godsiff -- oxideinteractive.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Accessibility in Australia
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Sue Choong Sent: Friday, 6 August 2010 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] Accessibility in Australia Is it mandatory for all australian websites to be accessible or does this only apply to government websites? Just a little confused after reading article below which only mentioned government sites. Http://bit.ly/dddhz8 That link didn't come through, so here's a general answer. If a person regards a site as having an accessibility problem (whether the site is in the public or private sector) they are entitled to complain to the Australian Human Rights Commission, who may require the site to be made more accessible. If the site owner refuses to do this, they may be required to pay a financial penalty - as was the case with SOCOG when Bruce Maguire laid his complaint before the Sydney Olympics. The operative legislation is the Commonwealth Disability Discrimination ACT 1992. see http://www.hreoc.gov.au/disability_rights/standards/www_3/www_3.html Kerry *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** --- This email, and any attachments, may be confidential and also privileged. If you are not the intended recipient, please notify the sender and delete all copies of this transmission along with any attachments immediately. You should not copy or use it for any purpose, nor disclose its contents to any other person. --- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
On 5 Aug 2010, at 23:51, tee wrote:
On Aug 5, 2010, at 2:05 PM, David Storey wrote:
On 5 Aug 2010, at 21:12, tee wrote:
Hi David,
Having done 2 full sites+ many exercise mobile sites, I view at
Opera Mini (including the Mobile 10) the Internet Explorer 6+7,
it's a browser one will hate it, curse it more than praise it :-(
What are your issues with Opera Mobile (Opera Mini has known
restrictions as it is designed for low-end devices which can't
power a full browser; .
Are you mixing up Mini and Mobile,
Oops, I must be. Mini and Mobile sounded very much the same browser
to me, and I got an impression that Opera had consolidated the two
name from Mini to Mobile 10 since the version 5.
No. Opera Mini is for JavaME enabled feature phones and restrictive
devices (such as iOS), but does work on Smart Phones as it works
anywhere (and there are special versions for a number of smart phone
platforms to take advantage of features they offer such as being able
to be set as the default browser, which Java often can't offer)
Opera Mobile is for Smartphone platforms: Symbian, Windows Mobile,
Maemo and Android.
So the one I been using is Opera Mini 5 in my iPod (should this be
called a smart phone equivalent?)
No, iOS doesn't allow Opera Mobile due to its licensing terms and
conditions. It is capable of running browser such as Opera Mobile
technically, but not politically.
, but it does look to me like a full browser (and with many quirks).
We have a shared UI layer across our mobile (and a number of other
devices such as TV) products. On the surface the UI is the same
between Mini and Mobile, but the engine is different. Mobile is a full
Opera Presto rendering engine under the hood. Mini is a thin client
(you could almost think of it as something like a PDF viewer) which
renders on a server and sends the transcoded content to the Opera Mini
client. Mobile runs on more advanced platforms so it will allow for
more things in the UI like higher DPI rendering and such. Mini can
also cope with those things if running on smart phones.
I have experienced many issues in Opera Mini 5 which took quite a
bit of time to get rid of, some were fixed, but these two are quite
stubborn.
1. Pre tag - in portrait view if a line of content is longer than
the device width, it doesn't wrap.
Pre is special in that it doesn't suppose to wrap.
2. padding issue (I think) in the input. If I add a background image
like so and the image has a width of, say, 12px
input {
background: url(search-icon.png) no-repeat left top;
padding: 1px 2px 1px 16px
}
The input has a value of search site, the text should be pushed
16px to the right. Andriod and Safari obeyed the rule, but Opera
Mini ignores the padding rule which resulting the text and
background image overlapped.
I'd need to see an example, but Mini makes a number of trade-offs to
fit on basic devices, such as the transcoding I mentioned earlier.
This does some reformatting to wrap content to a page width so no
horizontal scrolling of text and such is needed when zooming in
(horizontal scrolling is often difficult on feature phones, and
generally isn't a good experience in general to have to scroll left
and right to read text). This transcoding and line length wrapping
could be causing issues, especially if it works on desktop. The engine
on desktop and the engine run by the Opera Mini server is basically
the same. Some advanced graphical features are not supported (eg.
transforms, border-radius etc.) as they require our Vega graphics
engine to render, which isn't available in the device as it is a thin
client. We could transcode such things technically to images, but that
would be too costly in terms of bandwidth.
I am sure I will find more issues in this browser as I get more
opportunities to work on Mobile version of websites.
Sure. Remember to file bugs: bugs.opera.com/wizard/ . That way we will
fix them if it is possible, as we can't fix issues we don't know
about. Of course there is always trade offs in making a browser for
such limited devices, so we can't promise we will be able to fix
everything.
I often think Opera desktop has paddings/margins/line-height bug
related to EM and % which seems never fixed, but then it might be
Opera way of handling them, and they are carried over to Mini.
Opera has some rounding issues with large values of em's and % yes.
They are on the roadmap to be fixed but it takes time as browsers are
complex and there are always lots of things to fix, and lots of new
HTML5 or CSS3 or SVG features to support which are used by many
popular services and need to be supported. There are trade offs to be
made to support the rounding correctly, but we will fix it sooner
rather than later.
A browser that has only 5+% usage (based from many stats of the
sites I did)
Depends which market you
RE: [WSG] Accessibility in Australia
Presumably also all website which are accessed by Australians, as an Australian could complain to Aust Human Rights Commission about being discriminated against if website is not accessible. Evan Bailey A/Manager Knowledge Sharing Services Learning Initiatives and TAFE Services Centre for Learning Innovation Locked Bag 2006, Strathfield NSW 2135 P: (02) 9715 8130 F: (02) 9715 8237 E: evan.bai...@det.nsw.edu.au mailto:evan.bai...@det.nsw.edu.au NSW Department of Education and Training www.cli.nsw.edu.au http://www.cli.nsw.edu.au/index.htm From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Sue Choong Sent: Friday, 6 August 2010 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] Accessibility in Australia Is it mandatory for all australian websites to be accessible or does this only apply to government websites? Just a little confused after reading article below which only mentioned government sites. Http://bit.ly/dddhz8 Thanks in advance. Sue On 06/08/2010, at 9:06 AM, Josh Godsiff j...@oxideinteractive.com.au wrote: On 5/8/2010 8:03 PM, Foskett, Mike wrote: The scenario I'm thinking of is JS available but no CSS, either unavailable or switched off. Unless you're working on some sort of project where there's a high likelyhood that that will occur, don't bother - in the real world, the number of people with a JS-on CSS-off configuration is probably less than 0.5%. - Josh Godsiff -- oxideinteractive.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** ** This message is intended for the addressee named and may contain privileged information or confidential information or both. If you are not the intended recipient please delete it and notify the sender. ** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***image001.png
Re: [WSG] Accessibility in Australia
It's worth nothing that typically speaking, they don't. I imagine the threshold for accessibility is quite low, too. Presumably also all website which are accessed by Australians, as an Australian could complain to Aust Human Rights Commission about being discriminated against if website is not accessible. Evan Bailey A/Manager Knowledge Sharing Services Learning Initiatives and TAFE Services Centre for Learning Innovation Locked Bag 2006, Strathfield NSW 2135 P: (02) 9715 8130 F: (02) 9715 8237 E: evan.bai...@det.nsw.edu.au NSW Department of Education and Training www.cli.nsw.edu.au From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Sue Choong Sent: Friday, 6 August 2010 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] Accessibility in Australia Is it mandatory for all australian websites to be accessible or does this only apply to government websites? Just a little confused after reading article below which only mentioned government sites. Http://bit.ly/dddhz8 Thanks in advance. Sue On 06/08/2010, at 9:06 AM, Josh Godsiff j...@oxideinteractive.com.au wrote: On 5/8/2010 8:03 PM, Foskett, Mike wrote: The scenario I'm thinking of is JS available but no CSS, either unavailable or switched off. Unless you're working on some sort of project where there's a high likelyhood that that will occur, don't bother - in the real world, the number of people with a JS-on CSS-off configuration is probably less than 0.5%. - Josh Godsiff -- oxideinteractive.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** ** This message is intended for the addressee named and may contain privileged information or confidential information or both. If you are not the intended recipient please delete it and notify the sender. ** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** ***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: memberh...@webstandardsgroup.org***
Re: [WSG] Accessibility in Australia
Noting even, not nothing. It's worth nothing that typically speaking, they don't. I imagine the threshold for accessibility is quite low, too. Presumably also all website which are accessed by Australians, as an Australian could complain to Aust Human Rights Commission about being discriminated against if website is not accessible. Evan Bailey A/Manager Knowledge Sharing Services Learning Initiatives and TAFE Services Centre for Learning Innovation Locked Bag 2006, Strathfield NSW 2135 P: (02) 9715 8130 F: (02) 9715 8237 E: evan.bai...@det.nsw.edu.au NSW Department of Education and Training www.cli.nsw.edu.au From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Sue Choong Sent: Friday, 6 August 2010 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] Accessibility in Australia Is it mandatory for all australian websites to be accessible or does this only apply to government websites? Just a little confused after reading article below which only mentioned government sites. Http://bit.ly/dddhz8 Thanks in advance. Sue On 06/08/2010, at 9:06 AM, Josh Godsiff j...@oxideinteractive.com.au wrote: On 5/8/2010 8:03 PM, Foskett, Mike wrote: The scenario I'm thinking of is JS available but no CSS, either unavailable or switched off. Unless you're working on some sort of project where there's a high likelyhood that that will occur, don't bother - in the real world, the number of people with a JS-on CSS-off configuration is probably less than 0.5%. - Josh Godsiff -- oxideinteractive.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** ** This message is intended for the addressee named and may contain privileged information or confidential information or both. If you are not the intended recipient please delete it and notify the sender. ** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** ***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: memberh...@webstandardsgroup.org***
Re: [WSG] :: opera mini 5.1 ::
Duncan Hill wrote: On Thu, 05 Aug 2010 21:41:33 +0100, David Laakso da...@chelseacreekstudio.com wrote: Having checked in Opera desktop, which does respond to the @media queries, and the N80, I have a suspicion that there may be something in your header that is maintaining a side scroll on the handheld. Could that be an overflow failure in Mini or a minimum size setting. Best wishes Duncan Hmm. Doubt it is Opera Mini. SanyoMiro okay this end. N80 cache issue? AP from sidebar [digits] and/or header metroedition display:none; not holding? I will check it out. Thanks for the heads-up. Best, ~d -- desktop http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
tee wrote: This site may give you a general idea how much it may cost your mobile user per page. http://mobiready.com tee Granted all 7 images in the portfolio section are heavy, Nevertheless, the mobile device is SanyoMirro [ a low-end handset-- it is not a smart-phone ] for BoostMobile [ the carrier charge is a flat-fee of 50 dollars per month for /unlimited/ phone and internet use -- there is no mobile user per page charge ]. Unlike my former iPhone I do not need to constantly re-charge the battery; I can make audible phone calls to a friend who lives in the same apartment building as me; I can also make audible phone calls to downtown Boston [4 miles away]; I am able make frequent audible phone calls to California, Tennessee, and Michigan. And it sure is a lot /easier and cheaper/ to read the New York Times on a daily basis on my SanyoMirro than it ever was on my iPhone... Rock-on Opera Mini/BoostMobile. End of ATT/smart-phone rant :-) . Best, ~d -- http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
Checked one of a mobile sites I did that has inline image larger than 480px and no width/height attributes were declared in the CSS and markup, but Opera Mini is able to resize the image fits in the screen. I think I have a fine guess what has gone wrong with your inline image-it's simply too long, and Opera Mini resizing the whole image to fit in the screen propotionally using Height, though I suspect the way you have your img declared (auto height and max-width) might have attributed to it but I didn't test it more thoroughly. your vision - orignial image image sie: 620 x 2254px http://bit.ly/mwdd I thought maybe html5 be contributed too it too so I made a XHTML version to compare just in case. image sie: 620 x 861px image trimmed - xhtml version http://bit.ly/mwddd2 trimmed image - html5 version http://bit.ly/mwddd3 Screen shots taken from Opera Mini and Safari http://greensho.nexcess.net/mweb/s1.png - landscape, note that it resized the image to fit in 320 height thus making the image rendered smaller than the portrait view below. http://greensho.nexcess.net/mweb/s3.png - portrait. I guess David from Opera has a good explanation for it. A note for Safari and Andriod, the trimmed image is still too wide and part of it got cut off, but this can be compensated with reduced percentage in both width and height. http://greensho.nexcess.net/mweb/d4.html David, FYI re input padding bug http://greensho.nexcess.net/mweb/s2.png http://greensho.nexcess.net/mweb/s3-safari.png tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
I forgot to mention, when switching between portrait and landscape, Opera Mini dosen't auto re-adjust and refresh the layout, you need to refresh it manually if you try to see the examples from the O browser. This bug gave a false impression the first time I used Opera Mini, that the media rule doesn't get picked up, and took me days to realize the quirk (guess I am a slow learner :-) ). tee On Aug 5, 2010, at 7:55 PM, tee wrote: Checked one of a mobile sites I did that has inline image larger than 480px and no width/height attributes were declared in the CSS and markup, but Opera Mini is able to resize the image fits in the screen. I think I have a fine guess what has gone wrong with your inline image-it's simply too long, and Opera Mini resizing the whole image to fit in the screen propotionally using Height, though I suspect the way you have your img declared (auto height and max-width) might have attributed to it but I didn't test it more thoroughly. your vision - orignial image image sie: 620 x 2254px http://bit.ly/mwdd I thought maybe html5 be contributed too it too so I made a XHTML version to compare just in case. image sie: 620 x 861px image trimmed - xhtml version http://bit.ly/mwddd2 trimmed image - html5 version http://bit.ly/mwddd3 Screen shots taken from Opera Mini and Safari http://greensho.nexcess.net/mweb/s1.png - landscape, note that it resized the image to fit in 320 height thus making the image rendered smaller than the portrait view below. http://greensho.nexcess.net/mweb/s3.png - portrait. I guess David from Opera has a good explanation for it. A note for Safari and Andriod, the trimmed image is still too wide and part of it got cut off, but this can be compensated with reduced percentage in both width and height. http://greensho.nexcess.net/mweb/d4.html David, FYI re input padding bug http://greensho.nexcess.net/mweb/s2.png http://greensho.nexcess.net/mweb/s3-safari.png *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] :: opera mini 5.1 ::
tee wrote: Checked one of a mobile sites I did that has inline image larger than 480px ...trimmed, thanks [I think :-) ]. Oh, easy for Leonardo. -- Dylan Thomas -- http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
