Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings

2011-04-06 Thread tee
 

 I tweaked the Javascript a bit and one line of CSS. I think this is what you 
 were trying to accomplish?http://jsbin.com/acori/16/


Many thanks! Yes it does.

 $('#nav li ul  li').hover(function() 

It never occurs to me to target hover class. I thought when cursor moves away 
from a li and move to its's siblings, the hover no longer applies to that li 
class but the sibling where the cursor points to.

tee




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings

2011-04-05 Thread Jon Reece
Not sure if this is exactly what you are looking for, but you can try
adding another selector to this code:

#nav .current,
#nav a:hover, #nav a:focus {
background-color:#fff!important;
color:#333;
}

Like this:

#nav .current,
#nav a:hover, #nav a:focus,
#nav ul li:hover  a {
background-color:#fff!important;
color:#333;
}

Note that IE 6/7 don't support :hover on list items.

- Jon



On Tue, Apr 5, 2011 at 4:47 AM, tee weblis...@gmail.com wrote:

 I am trying to achieve this via jQuery by adding a class as I don't think 
 it's possible with CSS (but maybe one of the CSS3 selectors can doit?).

 http://jsbin.com/acori/15/

 The menu is generated by the CMS system so there is restriction to adding new 
 class directly to a specific menu item. It's a 3 level menu but the flyout 
 starts from second level (2nd level menu 3).

 By default, the 1st level menu has a top-level class for anchor tag while 
 2nd and 3rd level don't have. What I want (and thought the easier way) to 
 achieve is to target the top-level to find the 2nd level menu 3, so that 
 I can add a current class for  2nd level menu 3, so that when flyout menu 
 expanded, and when cursor moves to the third level, the 2nd level menu 3 
 has the same white background color as the hover does.

 I have this code in which the last line is how I want to add the current 
 class.

     jQuery(#nav ulli).find(a.level-top  
 li).parent(li).addClass(current)


 Thanks!

 tee





 ***
 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] CSS variable navigational menu`

2011-01-09 Thread Benjamin Hawkes-Lewis
On Sun, Jan 9, 2011 at 2:09 PM, Goku San gokus...@hotmail.com wrote:
 I have the following navigational menu bar. The menu has multiple parent
 menu items.

[snip]

 What currently happens is when a user hovers over
 the Parent menu item, the child menu items appear below, horizontally, of
 course. And each time, the child menu items appear to the far left. So the
 problem is when we get to the 5th parent menu item, going across, hover over
 it, the child menu items appear below towards the far left. So it
 cosmetically looks wrong but also causes the user to further navigate their
 mouse to get to the child items. Anyway to position the child menu items to
 appear directly below the parents and not always to the far left?

Make the parents the containing blocks for the absolute positioning of
the children:

#nav .sub {
position: relative
}

http://reference.sitepoint.com/css/containingblock

I hope you'll ensure that users who are not using a mouse (e.g. people
with certain
motor disabilities) can still access the content linked in the child items,
whether via deeper links on hub pages reached via parent items or by ensuring
that child menus are focusable and visible on focus.

Food for thought:

http://www.w3.org/TR/WCAG20/#keyboard-operation

http://www.uie.com/articles/users_decide_first/

http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/

http://labs.benjaminhawkeslewis.com/rapid-access-hover-menu.html

--
Benjamin Hawkes-Lewis


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS variable navigational menu`

2011-01-09 Thread tee
 
On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote:
 
 Make the parents the containing blocks for the absolute positioning of
 the children:
 
 #nav .sub {
position: relative
 }
 
 http://reference.sitepoint.com/css/containingblock
 
 I hope you'll ensure that users who are not using a mouse (e.g. people
 with certain
 motor disabilities) can still access the content linked in the child items,
 whether via deeper links on hub pages reached via parent items or by ensuring
 that child menus are focusable and visible on focus.
 

Furthermore, you should get rid of all display:none in your inline style and in 
the CSS.

ul style=display: none;
#nav ul {display:none;}

These two essentially are the same. I am assuming the menu is controlled by a 
javascript, best practise is to use the  absolute positioning to control 
submenu and use the toogle or mouseover to trigger the sub-level. Judging from 
the #nav ul, it seems to be the case, but the display none overwrites the rule 
below.

#nav ul {position:absolute; left:0; top:30px; background:none; width:auto; 
border-top:solid 1px #00; height: 0px}

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS variable navigational menu`

2011-01-09 Thread Thierry Koblentz
 These two essentially are the same. I am assuming the menu is
 controlled by a javascript, best practise is to use the  absolute
 positioning to control submenu and use the toogle or mouseover to
 trigger the sub-level.

I'm not sure this is considered best practice as keyboard users would have
to go through all the links in the menu before reaching the last one.
These two examples show the difference between styling the sub menus
off-screen or via display:none
- http://www.tjkdesign.com/articles/new_drop_down/default.asp
- http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 


 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS variable navigational menu`

2011-01-09 Thread tee
 
On Jan 9, 2011, at 10:24 AM, Thierry Koblentz wrote:

 These two essentially are the same. I am assuming the menu is
 controlled by a javascript, best practise is to use the  absolute
 positioning to control submenu and use the toogle or mouseover to
 trigger the sub-level.
 
 I'm not sure this is considered best practice as keyboard users would have
 to go through all the links in the menu before reaching the last one.

I am a die-hard superfish menu fan :)

Fully aware of the argument. IMHO, this issue is like chicken and egg which 
comes first tiring and constantly on-going debate, which I have long given up 
:-)  

IMHO, this is a fundamental issue that should be fixed by the browser (with 
arrow keys, and with combination of ARIA perhaps?) that allow satisfying both, 
not by one school of developers who strongly believe in his way is better (who 
are you to dictate I wouldn't want to tab through all links and block me from 
accessing all the sub-links! Damn! Talk about freedom of accessibility!), and 
another school of developers believing her way is better (and who are you to 
dictate me to tab through all  links - I may not want to do that 6 days in a 
row, but on Sunday I  want the choice to be able to tab through all links just 
because it's a god-given fundamental right).

Having said that, I re-word my sentence: One of the best practises, and me, as 
a Superfish Menu fan thinks, is to use the absolute positioning to control 
submenu.

tee




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS variable navigational menu`

2011-01-09 Thread Goku San
 
Hi,
Thanks for your responses! I added the, #nav .sub {position: 
relative;}, removed the {display:none;} from my CSS file and from the ASPX 
page. Still not getting a solution. The #nav .sub {position: relative;} helped 
because it positioned the child elements directly below the parent. However, it 
repeated the next child element in the group below the above child element, and 
the same for the next one, in a vertical formate. I don't need it to do that. I 
need it to display the whole group of child elements going across horizontally 
directly below the parent. So take the following as an example:
A   B   C   1  2   3
User hovers over Parent A, Childs 1, 2, and 3 will display directly below A 
going across. I'm not good with Java. I believe this site and menu system does 
use some Java. I'm trying to stay away from it and achieve this functionality 
through the use of CSS.
Anyway to make this possible?
Thanks guys,Andy

 Subject: Re: [WSG] CSS variable navigational menu`
 From: weblis...@gmail.com
 Date: Sun, 9 Jan 2011 09:40:28 -0800
 To: wsg@webstandardsgroup.org
 
  
 On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote:
  
  Make the parents the containing blocks for the absolute positioning of
  the children:
  
  #nav .sub {
 position: relative
  }
  
  http://reference.sitepoint.com/css/containingblock
  
  I hope you'll ensure that users who are not using a mouse (e.g. people
  with certain
  motor disabilities) can still access the content linked in the child items,
  whether via deeper links on hub pages reached via parent items or by 
  ensuring
  that child menus are focusable and visible on focus.
  
 
 Furthermore, you should get rid of all display:none in your inline style and 
 in the CSS.
 
 ul style=display: none;
 #nav ul {display:none;}
 
 These two essentially are the same. I am assuming the menu is controlled by a 
 javascript, best practise is to use the  absolute positioning to control 
 submenu and use the toogle or mouseover to trigger the sub-level. Judging 
 from the #nav ul, it seems to be the case, but the display none overwrites 
 the rule below.
 
 #nav ul {position:absolute; left:0; top:30px; background:none; width:auto; 
 border-top:solid 1px #00; height: 0px}
 
 tee
 
 ***
 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] CSS variable navigational menu`

2011-01-09 Thread tee
 
On Jan 9, 2011, at 11:42 AM, Goku San wrote:

 Hi,
 
   Thanks for your responses! I added the, #nav .sub {position: 
 relative;}, removed the {display:none;} from my CSS file and from the ASPX 
 page. Still not getting a solution. The #nav .sub {position: relative;} 
 helped because it positioned the child elements directly below the parent. 
 However, it repeated the next child element in the group below the above 
 child element, and the same for the next one, in a vertical formate. I don't 
 need it to do that. I need it to display the whole group of child elements 
 going across horizontally directly below the parent. So take the following as 
 an example:
 
   A   B   C
   1  2   3
 
 User hovers over Parent A, Childs 1, 2, and 3 will display directly below A 
 going across. I'm not good with Java. I believe this site and menu system 
 does use some Java. I'm trying to stay away from it and achieve this 
 functionality through the use of CSS.
 
 Anyway to make this possible?
 
 Thanks guys,
 Andy

In order to help you better, maybe you can setup a sample page by copying over 
the menu (not just the first set) to a html page along with the script 
(javascript isn't the same as java) and CSS?

There is pure CSS drop-down menu, but if you need to support IE browsers, a 
javascript ones that controls the hover/mouseover/toggle behavior is  a better 
option.

Superfish menu, which I know pretty well, is a reliable open source menu system 
that works in all browsers including IE6, but there are many other options, 
such as the two from Thierry. Superfish require extra jQuery script though.

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] CSS variable navigational menu`

2011-01-09 Thread David Hucklesby

On 1/9/11 10:24 AM, Thierry Koblentz wrote:

These two essentially are the same. I am assuming the menu is
controlled by a javascript, best practise is to use the  absolute
positioning to control submenu and use the toogle or mouseover to
trigger the sub-level.


I'm not sure this is considered best practice as keyboard users would
have to go through all the links in the menu before reaching the last
one. These two examples show the difference between styling the sub
menus off-screen or via display:none -
http://www.tjkdesign.com/articles/new_drop_down/default.asp -
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp




+1

I have adapted the first of these very successfully, even adding fancy
fade effects for those who have scripting enabled. Very adaptive, and
does exactly what you want, I think. (Assuming you only have few
sub-menu items, as your example indicates,,,)

Cordially,
David
--


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS lists

2011-01-08 Thread David Laakso

On 1/7/11 8:10 PM, Thierry Koblentz wrote:

Hi all,

Besides the CSS-D list, which CSS lists would you recommend subscribing to?

Thanks,
--
Thierry




These come to mind???
The appropriate w3c list, and...
http://www.sitepoint.com/forums/
http://csscreator.com/
http://bytes.com/

Best,
~d

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS lists

2011-01-08 Thread Thierry Koblentz
 These come to mind???
 The appropriate w3c list, and...
 http://www.sitepoint.com/forums/
 http://csscreator.com/
 http://bytes.com/

Thanks David, but I'm not a big fan of fora (I prefer mailing lists).
Even though a forum like sitepoint has great threads (i.e. Test Your CSS
Skills). 
Check this demo:
http://www.pmob.co.uk/temp/swap-vertical-divs-around3.htm

Pretty cool isn't?

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 



  



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS-101

2011-01-01 Thread Diego La Monica
Interesting but not well viewd with android.

Happy new year to all readers.

Diego

Thierry Koblentz thierry.koble...@gmail.com ha scritto:

http://www.css-101.org

Happy New Year!
Bonne Année!

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS-101

2011-01-01 Thread Prashanth
On Sun, Jan 2, 2011 at 2:23 AM, Diego La Monica m...@diegolamonica.infowrote:

 Interesting but not well viewd with android.



ya, read it using the browser on your computer. :p awesome work Thierry,
though i have listen to your talk this helps me to understand better.


-- 
regards,
Prashanth
twitter: munichlinux
blog: honeycode.in
irc: munichlinux, JSLint, munichpython.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] CSS-101

2011-01-01 Thread Thierry Koblentz
@Diego: Smartphones are not the best device to use here since the idea behind 
the demo pages is to allow people to edit/tweak CSS declarations via their 
favorite dev tool. The goal is to make people get their hands under the hood to 
do their own investigation - to find out what the simplest change may trigger 
and why.

@Prashanth: This last July? Wow! It's a small world :)


Thanks for your feedback


--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 







***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] css

2010-11-16 Thread Debbie Johnson
I did a menu like this at wpsmedicare.com. The trick is to use a negative 
margin to hide the menu on hover. You can look at the master.css file to see 
the full code.


Debbie

-Original Message- 
From: PurencoolGmail

Sent: Sunday, November 14, 2010 10:18 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] css

hi

http://203.193.216.214/

I have an issue with this menu it works fine but the client has asked
when you hover over
top menu that the sub menu becomes visible and the stays there until you
hover over than
part of the top menu. If I was to move the mouse anywhere on the screen
the menu sub menu
will stay visible.

I was thinking hover a {display:block} any help would be appreciated.
But I am not sure how to
do this in css.

Purencool




***
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] css

2010-11-16 Thread Tom Livingston
On Mon, Nov 15, 2010 at 1:18 AM, PurencoolGmail purenc...@gmail.com wrote:
 hi

 http://203.193.216.214/


FYI...

I have an issue with the sub menus staying when I roll off the main
menu items in Safari 5 Mac. If I roll off the main items onto the sub
menu items the submenu disappears. Possibly a gap between the bottom
of main menu items and top of sub menu items.


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] css

2010-11-15 Thread Thierry Koblentz
 http://203.193.216.214/
 
 I have an issue with this menu it works fine but the client has asked
 when you hover over
 top menu that the sub menu becomes visible and the stays there until
 you
 hover over than
 part of the top menu. If I was to move the mouse anywhere on the screen
 the menu sub menu
 will stay visible.
 
 I was thinking hover a {display:block} any help would be appreciated.
 But I am not sure how to
 do this in css.

This can't be done with CSS alone, but before you try doing it with JS you
may want to ask yourself if that would not create serious usability issues.

I think it would be better - on page load - to show the sub-menu relevant to
*the* page (the top section).

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] css

2010-11-14 Thread David Dorward
 
On 15 Nov 2010, at 06:18, PurencoolGmail wrote:
 I have an issue with this menu it works fine but the client has asked when 
 you hover over

Shame: http://www.cennydd.co.uk/2010/end-hover-abuse-now/

 top menu that the sub menu becomes visible and the stays there until you 
 hover over than
 part of the top menu. If I was to move the mouse anywhere on the screen the 
 menu sub menu
 will stay visible.
 
 I was thinking hover a {display:block} any help would be appreciated. But I 
 am not sure how to
 do this in css.

If you are going to do this, then do it in JavaScript.

While it is clever to make content appear and disappear in CSS, JavaScript is 
much better suited to this type of task.

-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS rollovers for images + Feedback Sources??

2010-10-21 Thread Kevin Ireson
Disabled people should to be able to use websites. Replacing XHTML with 
JavaScript can cause accessibility issues.

 

Accessibility is the research and practice of making websites usable to as 
diverse a user base as possible, including people with hearing, visual and 
mobility disabilities, by removing obstacles and offering alternatives. 
(Loranger Nielsen 2006) 



WAI (Web Accessibility Initiative) develops accessibility guidelines, which are 
generally internationally accepted.  Online tools for testing website 
accessibility are available from them.  (W3C, 2009)

 

WAI also suggests manual testing to assess accessibility using text-based 
browsers, such as Lynx. Lynx emulates the environment of screen readers, used 
by sight-disabled users. Testing the slideshow like this would tell us how 
accessible it is. Also, feedback from involving disabled testers could help. 

 

Developers can access accessibility during testing by turning CSS and 
JavaScript off in their browsers to determine what alternatives are available. 
This could guide us to adding to hyperlink navigation with a dynamic menu, 
rather than replacing it.

 

Additionally, we could also ask the RNIB to do an accessibility assessment for 
us. A Royal National Institute of Blind People See it Right audit would use 
human auditors to help us. (RNIB, 2009)

 

Nearly any code can be implemented within the law. We can ensure alternatives 
are available for all disabled people. Why and to what level we should do this 
can be seen from different perspectives. 

 

Firstly, the Disability Discrimination Act (1995) is British law. Web-designers 
have a duty to advise owners of any website they work on to make reasonable 
efforts to provide services, of the same standard for the disabled, as you 
provide for the public. Secondly, it makes business sense. 10% of internet 
users have a disability. If you have a shop and your door only opens for 9 in 
10 of your customers you effectively have closed shop to 1 in 10. 

 

However, making your site accessible will cost designers time and thus the 
clients money. There are few presidents in British legal history of websites 
being taken to court and charged under the DDA (2005). So reasonable efforts, 
whatever that means, may suffice. Additionally, if your website is 
in-accessible does that really mean 10% of people can't use it? There are no 
concrete figures relating to internet users who require fully accessible 
websites. So, we could wait until the site is more popular to make it 
financially viable. 



Kevin Ireson

MD Hotels in London Ltd http://www.hotels-london-hotel.com

Hotels in Edinburgh Ltd http://www.hotels-edinburgh-scotland-hotels.com





From: Nick Stone 
Sent: Wednesday, October 20, 2010 9:13 PM
To: wsg@webstandardsgroup.org 
Subject: Re: [WSG] CSS rollovers for images + Feedback Sources??


Leslie,

This is such valuable feedback. 

Thanks very much!  

Does anyone have suggestions on how to obtain website usability feedback from 
various members of the disabled community?

Thanks in advance,
Nick

-- 
Nick Stone, MBA
SEO, Web Accessibility, Web Development
http://nick-stone.com/



Good idea, but please remember that for someone with problems of co-ordination 
or fine muscle control, hovering can be extremely difficult.  I've encountered 
javascript image galleries which work like this, and on a bad day I find them 
completely unusable. 

Lesley 

On 19/10/10 21:13, cat soul wrote: 

  Any thoughts on using CSS hover properties to show larger images? 

  The scenario I'm envisioning is one where you'd have small thumbnails of 
  samples, and hovering the mouse over them would invoke a hover state in 
  which a larger version of that same image would appear...Larger 
  meaning 400x600 pixels, or in that neighborhood. 

  Is this not wise from a coding perspective? How about usability? Do web 
  page visitors not expect this kind of behavior..would it be confusing to 
  them as to what they're supposed to do, or what to expect? 

  I'm wanting to use CSS to do what javascript rollovers do, only without 
  the javascript. 


  thanks for any feedback or opinions. 

  cs 





This email has been scanned by Netintelligence
http://www.netintelligence.com/email



***
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] CSS rollovers for images?

2010-10-20 Thread Kevin Ireson
An excellent and very up to date point about accessibility. 


From: tee 
Sent: Wednesday, October 20, 2010 1:57 AM
To: wsg@webstandardsgroup.org 
Subject: Re: [WSG] CSS rollovers for images?


Caution with the use of hover for such purpose if you also want touchscreen 
device user able to use it.  




In regards of touchscreen, this article explains it better than I can do.
http://trentwalton.com/2010/07/05/non-hover/



tee 


On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:


  You could certainly do that with CSS. You'll want to add javascript to 
control how the image shows and fades, positioning etc.

  For maximum accessibility, have the thumbnail link to the main image, then 
have your Javscript/CSS hijack the link and show the image. Everyone wins.

  Joseph R. B. Taylor
  Web Designer / Developer
  --
  Sites by Joe, LLC
  Clean, Simple and Elegant Web Design
  Phone: (609) 335-3076
  Web: http://sitesbyjoe.com
  Email: j...@sitesbyjoe.com


  On 10/19/10 4:13 PM, cat soul wrote: 
Any thoughts on using CSS hover properties to show larger images? 

The scenario I'm envisioning is one where you'd have small thumbnails of 
samples, and hovering the mouse over them would invoke a hover state in which a 
larger version of that same image would appear...Larger meaning 400x600 
pixels, or in that neighborhood. 

Is this not wise from a coding perspective? How about usability? Do web 
page visitors not expect this kind of behavior..would it be confusing to them 
as to what they're supposed to do, or what to expect? 

I'm wanting to use CSS to do what javascript rollovers do, only without the 
javascript. 


thanks for any feedback or opinions. 

cs 






This email has been scanned by Netintelligence
http://www.netintelligence.com/email



***
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] CSS rollovers for images?

2010-10-20 Thread Lesley Lutomski
Good idea, but please remember that for someone with problems of 
co-ordination or fine muscle control, hovering can be extremely 
difficult.  I've encountered javascript image galleries which work like 
this, and on a bad day I find them completely unusable.


Lesley

On 19/10/10 21:13, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small thumbnails of
samples, and hovering the mouse over them would invoke a hover state in
which a larger version of that same image would appear...Larger
meaning 400x600 pixels, or in that neighborhood.

Is this not wise from a coding perspective? How about usability? Do web
page visitors not expect this kind of behavior..would it be confusing to
them as to what they're supposed to do, or what to expect?

I'm wanting to use CSS to do what javascript rollovers do, only without
the javascript.


thanks for any feedback or opinions.

cs


***
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] CSS rollovers for images?

2010-10-20 Thread cat soul
Yes, and while we're on the topic of things that won't work on phones  
and iPadsis there anything else we need to know about that also  
won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design for  
the iPad and for phones, and have desktop and notebook users simply  
have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

From: tee
Sent: Wednesday, October 20, 2010 1:57 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS rollovers for images?

Caution with the use of hover for such purpose if you also want  
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I  
can do.

http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add  
javascript to control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main  
image, then have your Javscript/CSS hijack the link and show the  
image. Everyone wins.

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
Clean, Simple and Elegant Web Design
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:


Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small  
thumbnails of samples, and hovering the mouse over them would  
invoke a hover state in which a larger version of that same image  
would appear...Larger meaning 400x600 pixels, or in that  
neighborhood.


Is this not wise from a coding perspective? How about usability?  
Do web page visitors not expect this kind of behavior..would it  
be confusing to them as to what they're supposed to do, or what  
to expect?


I'm wanting to use CSS to do what javascript rollovers do, only  
without the javascript.



thanks for any feedback or opinions.

cs



This email has been scanned by Netintelligence
http://www.netintelligence.com/email

***
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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS rollovers for images?

2010-10-20 Thread Joseph Taylor
Good questions. I have yet to see definitive answers for most of these 
questions.


I've been thinking on this constantly as I try to alter my work flow to 
a format that will please all the devices.


Some things haven't changed:

Start with clean HTML that'll work on ANYTHING including JAWS etc.

Build upwards with your CSS from IE6 to modern browsers (or downwards 
from modern browsers to IE6)


Use javascript to add behaviors to your HTML/CSS in a progressive fashion.

The touch devices add a new dimension to the workflow. They may change 
the way you approach some items on a page (like a multi select widget) 
and you now have to pay more attention to the :active attribute in your 
CSS as that'll react to a touch vs. :hover - no biggie, right?


For the most part, the touch devices all use modern browsers which is 
pretty cool. I made an iphone version of my site using media queries, 
which was a lot of fun to do.


The touch devices open a new horizon - no IE!!!

Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 10:44 AM, cat soul wrote:
Yes, and while we're on the topic of things that won't work on phones 
and iPadsis there anything else we need to know about that also 
won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design for 
the iPad and for phones, and have desktop and notebook users simply 
have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

*From:* tee mailto:weblis...@gmail.com
*Sent:* Wednesday, October 20, 2010 1:57 AM
*To:* wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org
*Subject:* Re: [WSG] CSS rollovers for images?

Caution with the use of hover for such purpose if you also want 
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I can do.
http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add javascript 
to control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main 
image, then have your Javscript/CSS hijack the link and show the 
image. Everyone wins.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small 
thumbnails of samples, and hovering the mouse over them would 
invoke a hover state in which a larger version of that same image 
would appear...Larger meaning 400x600 pixels, or in that 
neighborhood.


Is this not wise from a coding perspective? How about usability? Do 
web page visitors not expect this kind of behavior..would it be 
confusing to them as to what they're supposed to do, or what to 
expect?


I'm wanting to use CSS to do what javascript rollovers do, only 
without the javascript.



thanks for any feedback or opinions.

cs




This email has been scanned by Netintelligence
http://www.netintelligence.com/email


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org 
mailto:memberh...@webstandardsgroup.org

***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org 
mailto: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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS rollovers for images?

2010-10-20 Thread Patrick H. Lauke

On 20/10/2010 10:44, cat soul wrote:

Yes, and while we're on the topic of things that won't work on phones
and iPadsis there anything else we need to know about that also
won't play nice with those two handheld platforms?


A gentle reminder that iDevices are not the only platform that has touch 
interfaces, and that Mobile Safari is not the only browser on devices 
with touch interfaces.


Interestingly enough, the old problems of hover/mouse based interactions 
that we've been preaching against for ages with regards to (keyboard) 
accessibility have now reappeared in terms of touchscreen interfaces, 
where hovering doesn't work (reliably - some devices have weird 
heuristics where a click can be interpreted as a hover in certain 
conditions).


P
--
Patrick H. Lauke
__
re∑dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS rollovers for images?

2010-10-20 Thread cat soul
will there be/can there be a  new command/property which can be read  
by each device the way it needs to be?


could there be soon a touch command so that you could write the  
code like:



hover, do this. If no hover, then touch, do this. If no touch, then  
__ and do this


?



On Oct 20, 2010, at 8:45 AM, Patrick H. Lauke wrote:

Interestingly enough, the old problems of hover/mouse based  
interactions that we've been preaching against for ages with  
regards to (keyboard) accessibility have now reappeared in terms of  
touchscreen interfaces, where hovering doesn't work (reliably -  
some devices have weird heuristics where a click can be interpreted  
as a hover in certain conditions).




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS rollovers for images?

2010-10-20 Thread cat soul
Well, you certainly busted wide open a huge can of worms, Joseph, and  
I salute you for it.

the one comfy thing in that, to me, is the no IE part.


Starting with clean HTML is easy enough, but everything else is  
squarely in the don't count on it category..revealing the lick and  
a promise nature of CSS and  Jscript...not that they are not worthy  
tools; they simply can't be counted upon to be properly supported...



but neither can HTML, which, IIRC, is the reason for CSS.


Yanno, folks...I am smelling the need for some kind of revolution  
here...That standards do not work reliably doesn't help anyone..not  
client, not end-user, not author/designer/developer.



Please don't groan, but my background is in Print. Luckily, I never  
had to write PostScript. Illustrator, PS, Quark, and later InDesign  
all do a fine job of it.



but just imagine if I DID have to write the post script, and to know  
variations for every single printing device?!?!


IMHO, we need some kind of lingua franca that works for all of these  
electronic gizmos once and for all...


but...things have been set in motion, and perhaps it's going to  
remain a bucket of stinky fish guts into the foreseeable future.



cs



On Oct 20, 2010, at 8:16 AM, Joseph Taylor wrote:

Good questions. I have yet to see definitive answers for most of  
these questions.


I've been thinking on this constantly as I try to alter my work  
flow to a format that will please all the devices.


Some things haven't changed:

Start with clean HTML that'll work on ANYTHING including JAWS etc.

Build upwards with your CSS from IE6 to modern browsers (or  
downwards from modern browsers to IE6)


Use javascript to add behaviors to your HTML/CSS in a progressive  
fashion.


The touch devices add a new dimension to the workflow. They may  
change the way you approach some items on a page (like a multi  
select widget) and you now have to pay more attention to  
the :active attribute in your CSS as that'll react to a touch  
vs. :hover - no biggie, right?


For the most part, the touch devices all use modern browsers which  
is pretty cool. I made an iphone version of my site using media 
queries, which was a lot of fun to do.


The touch devices open a new horizon - no IE!!!
Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
Clean, Simple and Elegant Web Design
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 10:44 AM, cat soul wrote:


Yes, and while we're on the topic of things that won't work on  
phones and iPadsis there anything else we need to know about  
that also won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design  
for the iPad and for phones, and have desktop and notebook users  
simply have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

From: tee
Sent: Wednesday, October 20, 2010 1:57 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS rollovers for images?

Caution with the use of hover for such purpose if you also want  
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I  
can do.

http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add  
javascript to control how the image shows and fades, positioning  
etc.


For maximum accessibility, have the thumbnail link to the main  
image, then have your Javscript/CSS hijack the link and show the  
image. Everyone wins.

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
Clean, Simple and Elegant Web Design
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:


Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small  
thumbnails of samples, and hovering the mouse over them would  
invoke a hover state in which a larger version of that same  
image would appear...Larger meaning 400x600 pixels, or in  
that neighborhood.


Is this not wise from a coding perspective? How about  
usability? Do web page visitors not expect this kind of  
behavior..would it be confusing to them as to what they're  
supposed to do, or what to expect?


I'm wanting to use CSS to do what javascript rollovers do, only  
without the javascript.



thanks for any feedback or opinions.

cs



This email has been scanned by Netintelligence
http://www.netintelligence.com/email

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join

Re: [WSG] CSS rollovers for images?

2010-10-20 Thread Joseph Taylor
Things are definitely better now than they once were in the world of 
browsers.


Sure, we have a number of IE's of varying inability to deal with plus a 
bunch of others.


Sure, we're constantly in a state of it doesn't work on everything yet.

Sure, not one tool we use can be relied on 100% of the time.

But

We finally have an environment where standards can flourish. Browser 
competition exists again. So much so that Microsft had no choice but to 
join in. This is good.


We have new toys like CSS3 that create enough excitement that browsers 
are scrambling to handle them.


While I've been continuously disappointed for the last decade on 
standards adoption etc, I remain optimistic that the future is bright.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 12:11 PM, cat soul wrote:
Well, you certainly busted wide open a huge can of worms, Joseph, and 
I salute you for it.

the one comfy thing in that, to me, is the no IE part.


Starting with clean HTML is easy enough, but everything else is 
squarely in the don't count on it category..revealing the lick and a 
promise nature of CSS and  Jscript...not that they are not worthy 
tools; they simply can't be counted upon to be properly supported...



but neither can HTML, which, IIRC, is the reason for CSS.


Yanno, folks...I am smelling the need for some kind of revolution 
here...That standards do not work reliably doesn't help anyone..not 
client, not end-user, not author/designer/developer.



Please don't groan, but my background is in Print. Luckily, I never 
had to write PostScript. Illustrator, PS, Quark, and later InDesign 
all do a fine job of it.



but just imagine if I DID have to write the post script, and to know 
variations for every single printing device?!?!


IMHO, we need some kind of lingua franca that works for all of these 
electronic gizmos once and for all...


but...things have been set in motion, and perhaps it's going to remain 
a bucket of stinky fish guts into the foreseeable future.



cs



On Oct 20, 2010, at 8:16 AM, Joseph Taylor wrote:

Good questions. I have yet to see definitive answers for most of 
these questions.


I've been thinking on this constantly as I try to alter my work flow 
to a format that will please all the devices.


Some things haven't changed:

Start with clean HTML that'll work on ANYTHING including JAWS etc.

Build upwards with your CSS from IE6 to modern browsers (or downwards 
from modern browsers to IE6)


Use javascript to add behaviors to your HTML/CSS in a progressive 
fashion.


The touch devices add a new dimension to the workflow. They may 
change the way you approach some items on a page (like a multi select 
widget) and you now have to pay more attention to the :active 
attribute in your CSS as that'll react to a touch vs. :hover - no 
biggie, right?


For the most part, the touch devices all use modern browsers which is 
pretty cool. I made an iphone version of my site using media queries, 
which was a lot of fun to do.


The touch devices open a new horizon - no IE!!!

Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 10:44 AM, cat soul wrote:
Yes, and while we're on the topic of things that won't work on 
phones and iPadsis there anything else we need to know about 
that also won't play nice with those two handheld platforms?


Is a different design perspective in order now? Do we now design for 
the iPad and for phones, and have desktop and notebook users simply 
have that as what they see?


or are we back to sniffer scripts and multiple versions of our pages?


cs



On Oct 20, 2010, at 12:44 AM, Kevin Ireson wrote:


An excellent and very up to date point about accessibility.

*From:* tee mailto:weblis...@gmail.com
*Sent:* Wednesday, October 20, 2010 1:57 AM
*To:* wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org
*Subject:* Re: [WSG] CSS rollovers for images?

Caution with the use of hover for such purpose if you also want 
touchscreen device user able to use it.



In regards of touchscreen, this article explains it better than I 
can do.

http://trentwalton.com/2010/07/05/non-hover/

tee

On Oct 19, 2010, at 1:46 PM, Joseph Taylor wrote:

You could certainly do that with CSS. You'll want to add 
javascript to control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main 
image, then have your Javscript/CSS hijack the link and show the 
image. Everyone wins.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http

Re: [WSG] CSS rollovers for images?

2010-10-20 Thread Al Sparber

From: Patrick H. Lauke re...@splintered.co.uk

On 20/10/2010 10:44, cat soul wrote:

Yes, and while we're on the topic of things that won't work on phones
and iPadsis there anything else we need to know about that also
won't play nice with those two handheld platforms?


A gentle reminder that iDevices are not the only platform that has touch 
interfaces, and that Mobile Safari is not the only browser on devices 
with touch interfaces.


Interestingly enough, the old problems of hover/mouse based interactions 
that we've been preaching against for ages with regards to (keyboard) 
accessibility have now reappeared in terms of touchscreen interfaces, 
where hovering doesn't work (reliably - some devices have weird 
heuristics where a click can be interpreted as a hover in certain 
conditions).


Touch devices can be served targeted CSS via media queries. Just something to 
keep in mind :-)

--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread Joseph Taylor

Cat,

That's the holy trinity of web design: content, presentation and 
behavior. ;)


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 1:19 PM, cat soul wrote:

I thank you for that link, David.

The picture I am developing now is this: HTML and CSS should be used 
strictly for content, structure and formatting.


*Behaviors* are best left to things like Javascript.


Are these two statements ones that most here can buy into? Are they 
fair statements, accurate reflections of practice and real-world usage?


IOW, there are things we *can* do, and out of that, there are things 
we ought do, or ought not do, based on the demonstrable.



cs


On Oct 20, 2010, at 9:46 AM, David Dorward wrote:



On 20 Oct 2010, at 16:59, cat soul wrote:

will there be/can there be a  new command/property which can be read 
by each device the way it needs to be?


could there be soon a touch command so that you could write the 
code like:


hover, do this. If no hover, then touch, do this. If no touch, then 
__ and do this


We shouldn't need it.

We have :hover which can be thought of When the user is potentially 
about to activate something and we have :active which is When the 
user is activating something.


That should be enough until you start trying to use :hover for doing 
things beyond indicating the possibility of activation, and one you 
start doing that … http://www.cennydd.co.uk/2010/end-hover-abuse-now/


--
David Dorward
http://dorward.me.uk



***
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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread cat soul
Help me if I  mis-interpret the writer's fine article, but this  
pertains to Javascript rollovers, too.


The end user doesn't know and doesn't care whether that thing popping  
up was a CSS Hover, or a Javascript rollover. S/he only knows that,  
by innocently mousing around, something popped up without his/her  
deciding to actively invoke the popping up her/himself.


so maybe these rollovers, when they do ANYTHING besides indicate a  
clickable thing, are passe, amateurish techniques associated with the  
earlier days of the internet when the most cool thing was stuff  
happening.


Now we're all over it..we've seen it, and we are back to function,  
information, usability, speed...




On Oct 20, 2010, at 9:46 AM, David Dorward wrote:

That should be enough until you start trying to use :hover for  
doing things beyond indicating the possibility of activation, and  
one you start doing that … http://www.cennydd.co.uk/2010/end-hover- 
abuse-now/




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread cat soul
Well, I am down with that..I never did care for the jumpy, spinny,  
whizzy things... As a print designer, I'm all about good design, good  
typography, quality imagery and clear communication.


however, you sometimes get the idea that if you don't pay obeisance  
to that fashion (jumpy, spinny, whizzy), you'll be ignored and  
marginalized in favor of those whose sites are a  multi-sensory  
fantasmatron of motion,  speed and sounds.



However, books have been captivating people for centuries and they  
just sit there until you pick them up and use them.


I would be happy to have none of that silly stuff on my page, but  
then I get told my site looks a bit dated.



cs



On Oct 20, 2010, at 10:40 AM, Joseph Taylor wrote:


Cat,

That's the holy trinity of web design: content, presentation and  
behavior. ;)

Joseph R. B. Taylor
Web Designer / Developer
--
Sites by Joe, LLC
Clean, Simple and Elegant Web Design
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/20/10 1:19 PM, cat soul wrote:


I thank you for that link, David.

The picture I am developing now is this: HTML and CSS should be  
used strictly for content, structure and formatting.


*Behaviors* are best left to things like Javascript.


Are these two statements ones that most here can buy into? Are  
they fair statements, accurate reflections of practice and real- 
world usage?


IOW, there are things we *can* do, and out of that, there are  
things we ought do, or ought not do, based on the demonstrable.



cs


On Oct 20, 2010, at 9:46 AM, David Dorward wrote:



On 20 Oct 2010, at 16:59, cat soul wrote:

will there be/can there be a  new command/property which can be  
read by each device the way it needs to be?


could there be soon a touch command so that you could write  
the code like:


hover, do this. If no hover, then touch, do this. If no touch,  
then __ and do this


We shouldn't need it.

We have :hover which can be thought of When the user is  
potentially about to activate something and we have :active  
which is When the user is activating something.


That should be enough until you start trying to use :hover for  
doing things beyond indicating the possibility of activation, and  
one you start doing that … http://www.cennydd.co.uk/2010/end- 
hover-abuse-now/


--
David Dorward
http://dorward.me.uk



***
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.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] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread Hassan Schroeder

On 10/20/10 10:19 AM, cat soul wrote:


The picture I am developing now is this: HTML and CSS should be used strictly 
for content,
structure and formatting.

*Behaviors* are best left to things like Javascript.


But it's not that cut and dried -- CSS has always had behaviors,
e.g. :hover, :focus, as well.


so maybe these rollovers, when they do ANYTHING besides indicate a

 clickable thing, are passe, amateurish techniques ...


Now we're all over it..we've seen it, and we are back to function,

 information, usability, speed...

And maybe providing expanded affordances through hover behaviors is
totally appropriate in some circumstances, to deliver exactly those
benefits.  :-)

YMMV,
--
Hassan Schroeder - has...@webtuitive.com
webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
twitter: @hassan
  dream.  code.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread cat soul
I agree thoroughly, Hassan. Yet as this is a best-practices  
discussion and group, and since we've been hearing that these things  
A) don't always work and B) aren't always well-received by end users,  
we're left with a need.


And that need is to know: out of the universe of what we can do, what  
ought we do to ensure as universal an experience as possible?




cs


On Oct 20, 2010, at 11:26 AM, Hassan Schroeder wrote:


But it's not that cut and dried -- CSS has always had behaviors,
e.g. :hover, :focus, as well.


so maybe these rollovers, when they do ANYTHING besides indicate a

 clickable thing, are passe, amateurish techniques ...


Now we're all over it..we've seen it, and we are back to function,

 information, usability, speed...

And maybe providing expanded affordances through hover behaviors is
totally appropriate in some circumstances, to deliver exactly those
benefits.  :-)




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread Jason Arnold
On Wed, Oct 20, 2010 at 1:42 PM, cat soul cats...@thinkplan.org wrote:
 I agree thoroughly, Hassan. Yet as this is a best-practices discussion and
 group, and since we've been hearing that these things A) don't always work
 and B) aren't always well-received by end users, we're left with a need.

 And that need is to know: out of the universe of what we can do, what ought
 we do to ensure as universal an experience as possible?

progressive enhancement is what you ought to do.  and to answer the
question if the experience needs to be same universally we have the
answer right here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

-- 

Jason Arnold
http://www.jasonarnold.net



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread Hassan Schroeder

On 10/20/10 11:42 AM, cat soul wrote:

I agree thoroughly, Hassan. Yet as this is a best-practices discussion and 
group, and since
we've been hearing that these things A) don't always work and B) aren't always 
well-received by
end users, we're left with a need.

And that need is to know: out of the universe of what we can do, what ought we 
do to ensure as
universal an experience as possible?


I don't see any such need. Every site or application needs to be
evaluated in terms of the expected audience. Testing with real users
is essential, but you can still reasonably start with assumptions
that differ depending on whether you're building e.g. an intranet
inventory-management system vs a public lolcats-haiku-sharing site :-)

--
Hassan Schroeder - has...@webtuitive.com
webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
twitter: @hassan
  dream.  code.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread Jon McInerney
stop sending me emails

On Wed, Oct 20, 2010 at 3:25 PM, Hassan Schroeder has...@webtuitive.com wrote:
 On 10/20/10 11:42 AM, cat soul wrote:

 I agree thoroughly, Hassan. Yet as this is a best-practices discussion and
 group, and since
 we've been hearing that these things A) don't always work and B) aren't
 always well-received by
 end users, we're left with a need.

 And that need is to know: out of the universe of what we can do, what
 ought we do to ensure as
 universal an experience as possible?

 I don't see any such need. Every site or application needs to be
 evaluated in terms of the expected audience. Testing with real users
 is essential, but you can still reasonably start with assumptions
 that differ depending on whether you're building e.g. an intranet
 inventory-management system vs a public lolcats-haiku-sharing site :-)

 --
 Hassan Schroeder - has...@webtuitive.com
 webtuitive design ===  (+1) 408-621-3445   === http://webtuitive.com
 twitter: @hassan
                          dream.  code.


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***





-- 
Jonathan T. McInerney
Vice President, Pearse Street, Inc.

www.pearsestreet.com
800-985-5932


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread cat soul

Heh!  That is pretty funny!

However, clients may have the need to ensure a universal experience.  
One example of this is in their brand values, which may call for a  
certain look and feel. If a person experiences one thing on their  
iPad and another experiences something different on their HP  
notebook, those brand values could be said to have been compromised,  
diluted, changed..


cs


On Oct 20, 2010, at 12:07 PM, Jason Arnold wrote:


progressive enhancement is what you ought to do.  and to answer the
question if the experience needs to be same universally we have the
answer right here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

--




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS, :hover and touch screen devices (Was: CSS rollovers for images?)

2010-10-20 Thread Russ Weakley
 
 stop sending me emails

We've stopped sending this person emails. no need to comment on this.  :)

Continue with this great thread!

Thanks
Russ

BTW, every WSG email that goes out has an unsubscribe link at the bottom. 
Better to click that that tell 7,000 people you don't want any emails  :)



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS rollovers for images + Feedback Sources??

2010-10-20 Thread Nick Stone

 Leslie,

This is such valuable feedback.

Thanks very much!

Does anyone have suggestions on how to obtain website usability feedback 
from various members of the disabled community?


Thanks in advance,
Nick

--
Nick Stone, MBA
SEO, Web Accessibility, Web Development
http://nick-stone.com/




Good idea, but please remember that for someone with problems of 
co-ordination or fine muscle control, hovering can be extremely 
difficult.  I've encountered javascript image galleries which work like 
this, and on a bad day I find them completely unusable.


Lesley

On 19/10/10 21:13, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small thumbnails of
samples, and hovering the mouse over them would invoke a hover state in
which a larger version of that same image would appear...Larger
meaning 400x600 pixels, or in that neighborhood.

Is this not wise from a coding perspective? How about usability? Do web
page visitors not expect this kind of behavior..would it be confusing to
them as to what they're supposed to do, or what to expect?

I'm wanting to use CSS to do what javascript rollovers do, only without
the javascript.


thanks for any feedback or opinions.

cs




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS rollovers for images?

2010-10-20 Thread tee
 
On Oct 20, 2010, at 9:11 AM, cat soul wrote
 
 Please don't groan, but my background is in Print. Luckily, I never had to 
 write PostScript. Illustrator, PS, Quark, and later InDesign all do a fine 
 job of it.
 
 
 but just imagine if I DID have to write the post script, and to know 
 variations for every single printing device?!?!
 
 IMHO, we need some kind of lingua franca that works for all of these 
 electronic gizmos once and for all...
 
 but...things have been set in motion, and perhaps it's going to remain a 
 bucket of stinky fish guts into the foreseeable future.
 

As someone who was in print media, I would say the approach is pretty much the 
same (well except the creative part-creative as artistic) if you can get out of 
the print media box.

You may not need to write PostScript, but you need to know how to fix the 
PostScript errors (this may no longer needed as it used to be anymore with the 
advanced printing technology that we have today): I remembered the days when I 
could spent 5 hours layout a 300 pages documentation and spent extra 8 hours to 
hunt the Postscript errors that occurred during printing/PDF conversion. 
Commanding the essential software (Illustrator, PS, Quark, and later InDesign) 
is just as  the same that you need to command markup and CSS, and command it 
well.


Fixing PostScript error is like knowing browser quirks, e.g. what to avoid when 
you write your CSS; where to look for clue when your layout goes out of whack 
in certain browser(s). If you are lucky than I was, you may never have to deal 
with PostScript, but the similar goes to colors, paper and printing technique 
(none-digital printing), that what color combinations with the right choice of 
paper stock can bring up the design etc.

I hated those days I had to stay in the office till midnight fighting with 
PostScript errors from time to time, but very so often in my life now as a web 
developer, I realized how much I benefited from those days which turned me into 
a pretty good problem solver in  solo web development setup.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS rollovers for images?

2010-10-20 Thread cat soul
tee...you are quite right to point that out..every medium has its  
booby traps and difficulties..I've spend my share of time wrangling  
with recalcitrant files myself.



cs


On Oct 20, 2010, at 4:11 PM, tee wrote:


Fixing PostScript error is like knowing browser quirks




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS rollovers for images?

2010-10-19 Thread Joseph Taylor
You could certainly do that with CSS. You'll want to add javascript to 
control how the image shows and fades, positioning etc.


For maximum accessibility, have the thumbnail link to the main image, 
then have your Javscript/CSS hijack the link and show the image. 
Everyone wins.


Joseph R. B. Taylor
/Web Designer / Developer/
--
Sites by Joe, LLC
/Clean, Simple and Elegant Web Design/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com


On 10/19/10 4:13 PM, cat soul wrote:

Any thoughts on using CSS hover properties to show larger images?

The scenario I'm envisioning is one where you'd have small thumbnails 
of samples, and hovering the mouse over them would invoke a hover 
state in which a larger version of that same image would 
appear...Larger meaning 400x600 pixels, or in that neighborhood.


Is this not wise from a coding perspective? How about usability? Do 
web page visitors not expect this kind of behavior..would it be 
confusing to them as to what they're supposed to do, or what to expect?


I'm wanting to use CSS to do what javascript rollovers do, only 
without the javascript.



thanks for any feedback or opinions.

cs


***
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] CSS rollovers for images?

2010-10-19 Thread Christian Montoya
On Tue, Oct 19, 2010 at 4:13 PM, cat soul cats...@thinkplan.org wrote:
 Any thoughts on using CSS hover properties to show larger images?

 The scenario I'm envisioning is one where you'd have small thumbnails of
 samples, and hovering the mouse over them would invoke a hover state in
 which a larger version of that same image would appear...Larger meaning
 400x600 pixels, or in that neighborhood.

 Is this not wise from a coding perspective? How about usability? Do web page
 visitors not expect this kind of behavior..would it be confusing to them as
 to what they're supposed to do, or what to expect?

I think people might expect a larger version of a thumbnail when they
click on it, not necessarily when they hover over it. I guess it
depends on how you would indicate to the user that this functionality
exists.

-- 
--
Christian Montoya
mappdev.com :: christianmontoya.net


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Css attributes

2010-10-18 Thread Ryan Seddon
Tim,

:not() is a CSS3 pseudo-class, IE8 doesn't support any CSS3 pseudo-classes.
However you could use http://selectivizr.com/ to add that support using
javascript.

Cheers,

Ryan

On Tue, Oct 19, 2010 at 11:54 AM, Tim Baillie tim.bail...@acu.edu.auwrote:

  Hi



 I’m trying to build some attribute selectors in CSS to check for missing
 content. Ie.



 IMG[alt=]

{

 border-width: 3px;

 border-color: #ff;

 border-style: solid;

 }

 // will place a red border around any image with an empty ALT tag







 IMG:not([alt])

{

 border-width: 3px;

 border-color: #ff;

 border-style: dotted;

 }



 // will place a red border around any image with no ALT tag



 The problem is the second one (not) only works with Firefox and Chrome. It
 won’t work in IE8



 Does anyone have a suggestion?



 Thanks

 Tim











 *
 ---
 *

 *Tim Baillie *| Quality Assurance Coordinator, ACUonline | *Australian
 Catholic University
 *Email tim.bail...@acu.edu.au | Phone +61 2 9739 *2287* | Facsimile +61 2
 9460 *4380

 North Sydney Campus (MacKillop)*

 Office 4, Level 1, 23 Berry Street

 North Sydney NSW 2060 Australia
 PO Box 968 | North Sydney | NSW 2059

 * *

 *CRICOS Reg. 4G, 00112C, 00873F, 00885B*
 Blackboard Support Phone *1800 759 660 *(Ask for ACU Blackboard support)
 Email blackboard.supp...@acu.edu.au



 If anyone can show me, and prove to me, that I am wrong in thought or deed,
 I will gladly change. I seek the truth, which never yet hurt anybody. It is
 only persistence in self-delusion and ignorance which does harm.

   - Marcus Aurelius Antoninus Augustus



 ***
 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] Css attributes

2010-10-18 Thread Christian Fagan
 Or, if you're already using a Javascript library (which many IE CSS3 
replacement scripts require) - like jQuery - you can simply add a class 
to the targeted element because jQuery understands CSS3 selectors, eg.


{
$(img:not([alt])).addClass(empty-image);
}

Disclaimer: I haven't used the :not selector before so am not sure if 
this is the correct syntax: *img:not([alt])* - I just borrowed from 
yours below ;)


   * Christian Fagan
   * Fagan Design
   * fagandesign.com.au
   * p: (+613) 9314-1841


On 19/10/2010 2:04 PM, Ryan Seddon wrote:

Tim,

:not() is a CSS3 pseudo-class, IE8 doesn't support any CSS3 
pseudo-classes. However you could use http://selectivizr.com/ to add 
that support using javascript.


Cheers,

Ryan

On Tue, Oct 19, 2010 at 11:54 AM, Tim Baillie tim.bail...@acu.edu.au 
mailto:tim.bail...@acu.edu.au wrote:


Hi

I’m trying to build some attribute selectors in CSS to check for
missing content. Ie.

IMG[alt=]

   {

border-width: 3px;

border-color: #ff;

border-style: solid;

}

// will place a red border around any image with an empty ALT tag

IMG:not([alt])

   {

border-width: 3px;

border-color: #ff;

border-style: dotted;

}

// will place a red border around any image with no ALT tag

The problem is the second one (not) only works with Firefox and
Chrome. It won’t work in IE8

Does anyone have a suggestion?

Thanks

Tim


*---*

*Tim Baillie *| Quality Assurance Coordinator, ACUonline |
*Australian Catholic University
*Email tim.bail...@acu.edu.au mailto:tim.bail...@acu.edu.au |
Phone +61 2 9739 *2287* | Facsimile +61 2 9460 *4380

North Sydney Campus (MacKillop)*

Office 4, Level 1, 23 Berry Street

North Sydney NSW 2060 Australia
PO Box 968 | North Sydney | NSW 2059

* *

*CRICOS Reg. 4G, 00112C, 00873F, 00885B*
Blackboard Support Phone *1800 759 660 *(Ask for ACU Blackboard
support)
Email blackboard.supp...@acu.edu.au
mailto:blackboard.supp...@acu.edu.au

If anyone can show me, and prove to me, that I am wrong in thought
or deed, I will gladly change. I seek the truth, which never yet
hurt anybody. It is only persistence in self-delusion and
ignorance which does harm.

  - Marcus Aurelius Antoninus Augustus


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
mailto: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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-10-01 Thread field . ninja

HI,

Joined the chat a bit late, hope the following URL is helpful
without being redundant.


http://html5boilerplate.com/
___
Christopher Kennon
Bushidodeep
Principal/Developer/Designer

(w) http://bushidodeep.com
(e)  field.ni...@gmail.com
(gv) 818.322.4513








On Sep 27, 2010, at 3:13 AM, tee wrote:

Only the two Webkit browsers are able to render the header and  
footer correctly.


http://lotusseedsdesign.com/css-test/templegate.html

header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}

I can't find anything wrong with my style sheet and the html code.

tee




***
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] CSS support of HTML5 tags not ready yet?

2010-10-01 Thread tee
I explored the html5boilerplate quite a bit, but decided to come up my own 
template instead.

To its credit, it has some really nice stuff in there and I have adapted to my 
template too, but there are a number of elements that I found that really 
shouldn't be in there.

 If you are using the template, you may want to get rid of these two:

body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; 
}

This one likely will get Felix Miata all heat up :-)

Apart from this, no typeface declared and default to sans or sans serif is not 
a good approach. I have in a few occasions found it resulted very bad rendering 
in IE from XP and Windows 7 via Parallel Desktop, however I have not run a 
thorough test whether it's a combinations of @fontface declaration (with 
font-wight:normal for headings) and Windows system in Parallel Desktop.



html { -webkit-font-smoothing: antialiased; }

This is best used only if a site has a darken background. For site that has 
light or white background, it gives a false impression that the text is blur. I 
get many feedbacks from clients that their customers complaint about the text 
not 'clear' in Chrome browser (and Safari too - but no PC user uses Safari I 
presume :-) ).

tee
On Oct 1, 2010, at 8:15 AM, field.ni...@gmail.com wrote:

 HI,
 
 Joined the chat a bit late, hope the following URL is helpful
 without being redundant.
 
 
 http://html5boilerplate.com/
 ___
 Christopher Kennon
 Bushidodeep
 Principal/Developer/Designer
 
 (w) http://bushidodeep.com
 (e)  field.ni...@gmail.com
 (gv) 818.322.4513
 
 
 
 
 
 
 
 
 On Sep 27, 2010, at 3:13 AM, tee wrote:
 
 Only the two Webkit browsers are able to render the header and footer 
 correctly.
 
 http://lotusseedsdesign.com/css-test/templegate.html
 
 header {
 height : 300px;
 width : 980px;
 text-align : center;
 position : relative;
 clear : both;
 overflow : hidden;
 margin : 0 auto;
 border : 1px solid #369;
 background : #ddd;
 }
 
 I can't find anything wrong with my style sheet and the html code. 
 
 tee
 
 
 
 
 ***
 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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


Re: [WSG] CSS and h264 vs Flash

2010-09-29 Thread Sam Sherlock
MS is on board but for vista  windows 7 users only

So ie pre ie9 is still going to be out there; I think that ie9 should be
released as an xp version also

the other browsers all make versions that work for xp and support html5;
though though some things would only work on ie9 (pinning tasks)

microsoft seem to be operating in a new light but I feel they could shine
brighter; but maybe thats too optimistic

 - S


On 29 September 2010 03:14, cat soul cats...@thinkplan.org wrote:

 that's pretty nice..

 I've also been reading that MS is on board with the HTML5+ h264 combo as an
 alternative to Flash, so perhaps a critical mass is forming...

 I do feel that flash  has its place, but that it was a mistake jumping in
 head first as the web seemed to do over flash so many years ago.

 cs



 On Sep 28, 2010, at 7:00 PM, Sam Sherlock wrote:

 transitions with css

 here http://timvandamme.com/ some icons use transition with css with in .
 vcard
 in firefox  the icons just use hover active
  - S



 On 29 September 2010 01:12, cat soul cats...@thinkplan.org wrote:

 On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote:

 Kroc Camen video for everybody
 http://camendesign.com/code/video_for_everybody

 I think Steve Jobs is thinking about everyone using Safari browser (or
 another modern browser that support h.264 not ff3.6 but ff4 will maybe,
 chrome does)

 but in reality for now such modern browsers are not as wide spread as the
  number that will have the flash plugin

 even as much as many dislike flash I think many webusers will be
 indifferent about how the video is shown - basic
 users just want things to work flash is something that people know about
 at some level


 OK..I understand about the video part, but can CSS handle other aspects of
 what Flash is used for, such as animation and interactivity?

 cs


 ***
 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] CSS and h264 vs Flash

2010-09-29 Thread Patrick H. Lauke

On 29/09/2010 09:59, Sam Sherlock wrote:

So ie pre ie9 is still going to be out there; I think that ie9 should be
released as an xp version also

the other browsers all make versions that work for xp and support html5;
though though some things would only work on ie9 (pinning tasks)


let's not get confused here. pinning tasks and all the other stuff that 
MS has been touting recently has nothing to do with HTML5, CSS3, or 
anything else. It's their proprietary meta element additions ... 
http://camendesign.com/blog/stop_this_madness


also, as already mentioned, but worth reiterating because of the 
thread's subject line: H.264 is merely a video codec. there are other 
codecs out there in use (ogg theora and webm). it's the fundamental 
behind it - the video element in HTML5 and its native support in 
browsers - that is the technology to be discussed (and whether or not 
that can supplant flash in certain generic use cases), not the 
(royalty/patent-encumbered) h.264 codec.


P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-29 Thread Oliver Boermans
I don't have any personal experience with this stuff but your
discussion rereminded me of a page I bookmarked recently:
http://jdbartlett.github.com/innershiv/

Sorry if it is not relevant, have not read the whole thread in detail.

Hope it helps!
--
Cheers Ollie
@ollicle

On Wednesday, September 29, 2010, Rob Crowther robe...@boogdesign.com wrote:
 On 28/09/10 23:41, Steven Tan wrote:

 Strange, I expected the innerHTML part to fail. Any idea why that works?


 Nope! I expected one or the other of the two (DOM and innerHTML) to fail as 
 surely jQuery is using one or other of them underneath?

 I haven't had time to dig in to the jQuery source and figure out what it's 
 doing, but I guess it's wrapping the DOM approach to make it look like 
 innerHTML, and something is getting lost in translation.

 Rob


 ***
 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] CSS and h264 vs Flash

2010-09-29 Thread cat soul


On Sep 29, 2010, at 1:59 AM, Sam Sherlock wrote:


MS is on board but for vista  windows 7 users only


Quite true.  All for-profit companies are in things for themselves.  
No news flash there.


But if I could tease out the original purpose of my question once  
more, it'd be to say that Flash has been used to introduce  
interactivity + multimedia into web pages. True, there are other ways  
to get interactivity, and other ways to get multimedia into web  
pages, but Flash offers a one-stop shopping tool, and as has been  
said, most/many people have the flash plug-in, so playback is more or  
less assured across the intertoobs.


Add that Flash comes with a load of issues, some for users, some for  
developers, which are unpleasant. CPU overhead, difficulties in  
updating/modifying sites are 2 I can think of.


So my question is: can CSS and/or Javascript plus *some* codec of  
movie/sound content replace Flash?



cs

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS and h264 vs Flash

2010-09-29 Thread Jason Arnold
On Wed, Sep 29, 2010 at 8:06 AM, cat soul cats...@thinkplan.org wrote:
Flash offers a one-stop shopping
 tool, and as has been said, most/many people have the flash plug-in, so
 playback is more or less assured across the intertoobs.

Except when dealing with the Mobile market where Flash isn't universal
and if you care at all if your content plays on the iProducts (Pad,
Pod, Phone which does have a decent marketshare in mobile devices)
then you'll be looking at alternatives in addition to Flash anyway.

 So my question is: can CSS and/or Javascript plus *some* codec of
 movie/sound content replace Flash?

Yes.

If you encode in Ogg and H.264 and include a Flash player fallback for
IE  9 then your video would be available in all the popular browsers
and available on all mobile devices that can play video from websites.
 There's already many templates out there that includes all this
(minus the video encodings obviously).



-- 

Jason Arnold
http://www.jasonarnold.net



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-29 Thread Rob Crowther

Oliver Boermans wrote:

I don't have any personal experience with this stuff but your
discussion rereminded me of a page I bookmarked recently:
http://jdbartlett.github.com/innershiv/

Yep, that looks like the root of the problem: doesn't work in Internet 
Explorer when an element's content is added with innerHTML /before/ 
being appended to the document


Thanks.

Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS and h264 vs Flash

2010-09-29 Thread Foskett, Mike
Strange,

My answer would've been not yet.
Too many differences in supported video codecs cross-browser.
A bit of a mare in production unless you've a transcoding service on your media 
server.

For the maximum audience:
Flash 8 preferably (9 if full screen is a requirement), ON2 VP6 Codec, with 
HTML5 H.264+AAC+MP4 for apple products as back-up.
Which is still one too many formats, not to forget that H.264 is licensed.

The next generation will be H.264 in Flash v9.3 plus. One format albeit 
licensed for big and small alike woohoo!

HTML5 video will only be truly usable when browsers and devices all support at 
least one universal codec.
Probably webM, but we'll have to wait at least a 2 years for that.

That's my tuppence worth anyway.


regards.

mike foskett



-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of Jason Arnold
Sent: 29 September 2010 14:41
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS and h264 vs Flash

On Wed, Sep 29, 2010 at 8:06 AM, cat soul cats...@thinkplan.org wrote:
Flash offers a one-stop shopping
 tool, and as has been said, most/many people have the flash plug-in, so
 playback is more or less assured across the intertoobs.

Except when dealing with the Mobile market where Flash isn't universal
and if you care at all if your content plays on the iProducts (Pad,
Pod, Phone which does have a decent marketshare in mobile devices)
then you'll be looking at alternatives in addition to Flash anyway.

 So my question is: can CSS and/or Javascript plus *some* codec of
 movie/sound content replace Flash?

Yes.

If you encode in Ogg and H.264 and include a Flash player fallback for
IE  9 then your video would be available in all the popular browsers
and available on all mobile devices that can play video from websites.
 There's already many templates out there that includes all this
(minus the video encodings obviously).



--

Jason Arnold
http://www.jasonarnold.net



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


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
***



Re: [WSG] CSS and h264 vs Flash

2010-09-29 Thread Sam Sherlock
@patrick yes pinning tasks is an example of what does not need to be done -
flourish added by microsoft for extra flare :) - bet that was the result of
some blue sky idea in some board room / focus group; more reason for ie 9ish
being on xp (50% users)

@mike some of the eloquence/stats I was looking for
 - S



On 29 September 2010 17:06, Foskett, Mike mike.fosk...@uk.tesco.com wrote:

 Strange,

 My answer would've been not yet.
 Too many differences in supported video codecs cross-browser.
 A bit of a mare in production unless you've a transcoding service on your
 media server.

 For the maximum audience:
 Flash 8 preferably (9 if full screen is a requirement), ON2 VP6 Codec, with
 HTML5 H.264+AAC+MP4 for apple products as back-up.
 Which is still one too many formats, not to forget that H.264 is licensed.

 The next generation will be H.264 in Flash v9.3 plus. One format albeit
 licensed for big and small alike woohoo!

 HTML5 video will only be truly usable when browsers and devices all support
 at least one universal codec.
 Probably webM, but we'll have to wait at least a 2 years for that.

 That's my tuppence worth anyway.


 regards.

 mike foskett



 -Original Message-
 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
 Behalf Of Jason Arnold
 Sent: 29 September 2010 14:41
 To: wsg@webstandardsgroup.org
 Subject: Re: [WSG] CSS and h264 vs Flash

 On Wed, Sep 29, 2010 at 8:06 AM, cat soul cats...@thinkplan.org wrote:
 Flash offers a one-stop shopping
  tool, and as has been said, most/many people have the flash plug-in, so
  playback is more or less assured across the intertoobs.

 Except when dealing with the Mobile market where Flash isn't universal
 and if you care at all if your content plays on the iProducts (Pad,
 Pod, Phone which does have a decent marketshare in mobile devices)
 then you'll be looking at alternatives in addition to Flash anyway.

  So my question is: can CSS and/or Javascript plus *some* codec of
  movie/sound content replace Flash?

 Yes.

 If you encode in Ogg and H.264 and include a Flash player fallback for
 IE  9 then your video would be available in all the popular browsers
 and available on all mobile devices that can play video from websites.
  There's already many templates out there that includes all this
 (minus the video encodings obviously).



 --

 
 Jason Arnold
 http://www.jasonarnold.net

 


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***


 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
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread David Dorward
On 27 Sep 2010, at 22:46, tee wrote:
 Without CSS, wouldn't the browsers render the page just like normal HTML page 
 with browser default styling? 

Yes … so the blocks would collapse back to inline.

 Quote Hugo, It will create those elements for IE6-8 (and older browsers with 
 lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs 
 when CSS is off yes?


Yes

-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Patrick H. Lauke

On 28/09/2010 07:12, David Dorward wrote:

On 27 Sep 2010, at 22:46, tee wrote:

Quote Hugo, It will create those elements for IE6-8 (and older browsers with lack 
of HTML5 support) in DOM. I suppose DOM will still work in older IEs when CSS is 
off yes?



Yes


To clarify though: the DOM will be messed up in IE without the JS 
training wheels (document.createElement('header') etc) telling it that 
there's these new elements. For instance, if I recall correctly, having 
something like


headerblah/header

will make IE think that there are a header element and a /header 
element, so the DOM will look something like


header
textnode
/header

where the three are siblings, rather than

header
-- textnode

where textnode is child of the header node

P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
__
twitter: @patrick_h_lauke | skype: patrick_h_lauke
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Steven Tan
Also ran into an issue when i was using js templating with html5 tags. Html5 
shiv only ran once when the document loads. Either need call it again or use 
html4 tags. I am choosing html4 tags for now. Sigh.

Steven

On 28/09/2010, at 6:34 PM, Patrick H. Lauke re...@splintered.co.uk wrote:

 On 28/09/2010 07:12, David Dorward wrote:
 On 27 Sep 2010, at 22:46, tee wrote:
 Quote Hugo, It will create those elements for IE6-8 (and older browsers 
 with lack of HTML5 support) in DOM. I suppose DOM will still work in older 
 IEs when CSS is off yes?
 
 
 Yes
 
 To clarify though: the DOM will be messed up in IE without the JS training 
 wheels (document.createElement('header') etc) telling it that there's these 
 new elements. For instance, if I recall correctly, having something like
 
 headerblah/header
 
 will make IE think that there are a header element and a /header element, 
 so the DOM will look something like
 
 header
 textnode
 /header
 
 where the three are siblings, rather than
 
 header
 -- textnode
 
 where textnode is child of the header node
 
 P
 -- 
 Patrick H. Lauke
 __
 re·dux (adj.): brought back; returned. used postpositively
 [latin : re-, re- + dux, leader; see duke.]
 
 www.splintered.co.uk | www.photographia.co.uk
 http://redux.deviantart.com | http://flickr.com/photos/redux/
 __
 twitter: @patrick_h_lauke | skype: patrick_h_lauke
 __
 
 
 ***
 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] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Rob Crowther

Steven Tan wrote:

Also ran into an issue when i was using js templating with html5 tags. Html5 
shiv only ran once when the document loads. Either need call it again or use 
html4 tags. I am choosing html4 tags for now. Sigh.

All the HTML5 shiv is doing is calling document.createElement against a 
list of tag names, there's nothing to stop you running that same code 
before your templating.


Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Steven Tan
No, it doesn't. But if you use html5 tags in your templating, then it might. 
Just something to watch out for.

One of my templates create a section and header for about 20 times. 

Steven

On 28/09/2010, at 8:49 PM, Rob Crowther robe...@boogdesign.com wrote:

 Steven Tan wrote:
 Also ran into an issue when i was using js templating with html5 tags. Html5 
 shiv only ran once when the document loads. Either need call it again or use 
 html4 tags. I am choosing html4 tags for now. Sigh.
 All the HTML5 shiv is doing is calling document.createElement against a list 
 of tag names, there's nothing to stop you running that same code before your 
 templating.
 
 Rob
 
 
 ***
 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] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Rob Crowther

On 28/09/10 14:10, Steven Tan wrote:

No, it doesn't. But if you use html5 tags in your templating, then it might. 
Just something to watch out for.

Sorry, I'm not sure what you're saying here: no it doesn't what?  It 
might what?



One of my templates create a section and header for about 20 times.

I'm not sure why that would matter?  The main problem the html5shiv is 
trying to solve is that IE doesn't allow CSS to be applied to elements 
it doesn't recognise.  If you call document.createElement('section') and 
document.createElement('header') then, from then onwards, IE will apply 
CSS to section and header elements.  It doesn't matter how many elements 
of any type there are.


Can you be more clear about the problem you encountered?

Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Steven Tan
Sure. :) 
The issue i am encountering is when I generate HTML on the fly using js 
templates. I have a couple of templates written with sections and headers tags. 
Because html5 shiv only create the elements on document loads, it will not work 
the html5 tags that gets appended to the document later. IE keeps throwing an 
object undefined error.  
I didn't realize this can be a bit of issue until i started work on it. I could 
modify the templating js to create the elements, but not sure whether it is 
worth the trouble at this stage. 

So watch out if you rely on js libraries that do something like this:
$(body).append(sectionsomething/section);
$(section).text(new something); // this line will throw an error in IE. 

Hope that makes sense. 



On 28/09/2010, at 11:55 PM, Rob Crowther robe...@boogdesign.com wrote:

 On 28/09/10 14:10, Steven Tan wrote:
 No, it doesn't. But if you use html5 tags in your templating, then it might. 
 Just something to watch out for.
 
 Sorry, I'm not sure what you're saying here: no it doesn't what?  It might 
 what?
 
 One of my templates create a section and header for about 20 times.
 
 I'm not sure why that would matter?  The main problem the html5shiv is trying 
 to solve is that IE doesn't allow CSS to be applied to elements it doesn't 
 recognise.  If you call document.createElement('section') and 
 document.createElement('header') then, from then onwards, IE will apply CSS 
 to section and header elements.  It doesn't matter how many elements of any 
 type there are.
 
 Can you be more clear about the problem you encountered?
 
 Rob
 
 
 ***
 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] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Rob Crowther

Steven Tan wrote

So watch out if you rely on js libraries that do something like this:
$(body).append(sectionsomething/section);
$(section).text(new something); // this line will throw an error in IE. 

Hope that makes sense. 



Ah, I understand, interesting.  I've done some example cases:

Base case for reference, loads html5shiv to render static content (works 
in IE8):

http://www.boogdesign.com/examples/html5shiv-static.html

Load html5shiv, create element with jQuery then change with jQuery 
(fails in IE8):

http://www.boogdesign.com/examples/html5shiv-jquery.html

Load html5shiv, use DOM methods to create element, change with jQuery 
(works in IE8):

http://www.boogdesign.com/examples/html5shiv-dom-jquery.html

Load html5shiv, use innerHTML to create element, change with jQuery 
(works in IE8):

http://www.boogdesign.com/examples/html5shiv-inner-jquery.html

So it looks like this is the broken part:

$(body).append(sectionsomething/section);

If you create the element with other methods, the next line works fine.

Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Steven Tan
Nice setup. Thanks for explaining it better than I do. ;)

 
 Load html5shiv, use innerHTML to create element, change with jQuery (works in 
 IE8):
 http://www.boogdesign.com/examples/html5shiv-inner-jquery.html

Strange, I expected the innerHTML part to fail. Any idea why that works?

 
 So it looks like this is the broken part:
 
 $(body).append(sectionsomething/section);
 
 If you create the element with other methods, the next line works fine. 
 
 Rob
 
 
 ***
 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] CSS support of HTML5 tags not ready yet?

2010-09-28 Thread Rob Crowther

On 28/09/10 23:41, Steven Tan wrote:

Strange, I expected the innerHTML part to fail. Any idea why that works?

Nope! I expected one or the other of the two (DOM and innerHTML) to fail 
as surely jQuery is using one or other of them underneath?


I haven't had time to dig in to the jQuery source and figure out what 
it's doing, but I guess it's wrapping the DOM approach to make it look 
like innerHTML, and something is getting lost in translation.


Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS and h264 vs Flash

2010-09-28 Thread Sam Sherlock
Kroc Camen video for everybody
http://camendesign.com/code/video_for_everybody

I think Steve Jobs is thinking about everyone using Safari browser (or
another modern browser that support h.264 not ff3.6 but ff4 will maybe,
chrome does)

but in reality for now such modern browsers are not as wide spread as the
 number that will have the flash plugin

even as much as many dislike flash I think many webusers will be indifferent
about how the video is shown - basic
users just want things to work flash is something that people know about at
some level

javascript (often) is part of doing what you can as developer to ensure that
the UX is as seamless as possible (requiring little of the user)
 http://camendesign.com/code/video_for_everybody
 - S


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS and h264 vs Flash

2010-09-28 Thread cat soul

On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote:


Kroc Camen video for everybody
http://camendesign.com/code/video_for_everybody

I think Steve Jobs is thinking about everyone using Safari browser  
(or another modern browser that support h.264 not ff3.6 but ff4  
will maybe, chrome does)


but in reality for now such modern browsers are not as wide spread  
as the  number that will have the flash plugin


even as much as many dislike flash I think many webusers will be  
indifferent about how the video is shown - basic
users just want things to work flash is something that people know  
about at some level


OK..I understand about the video part, but can CSS handle other  
aspects of what Flash is used for, such as animation and interactivity?


cs



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS and h264 vs Flash

2010-09-28 Thread Sam Sherlock
transitions with css

here http://timvandamme.com/ some icons use transition with css with in .
vcard
in firefox  the icons just use hover active
 - S



On 29 September 2010 01:12, cat soul cats...@thinkplan.org wrote:

 On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote:

 Kroc Camen video for everybody
 http://camendesign.com/code/video_for_everybody

 I think Steve Jobs is thinking about everyone using Safari browser (or
 another modern browser that support h.264 not ff3.6 but ff4 will maybe,
 chrome does)

 but in reality for now such modern browsers are not as wide spread as the
  number that will have the flash plugin

 even as much as many dislike flash I think many webusers will be
 indifferent about how the video is shown - basic
 users just want things to work flash is something that people know about at
 some level


 OK..I understand about the video part, but can CSS handle other aspects of
 what Flash is used for, such as animation and interactivity?

 cs


 ***
 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] CSS and h264 vs Flash

2010-09-28 Thread cat soul

that's pretty nice..

I've also been reading that MS is on board with the HTML5+ h264 combo  
as an alternative to Flash, so perhaps a critical mass is forming...


I do feel that flash  has its place, but that it was a mistake  
jumping in head first as the web seemed to do over flash so many  
years ago.


cs



On Sep 28, 2010, at 7:00 PM, Sam Sherlock wrote:


transitions with css

here http://timvandamme.com/ some icons use transition with css  
with in .vcard

in firefox  the icons just use hover active
 - S



On 29 September 2010 01:12, cat soul cats...@thinkplan.org wrote:
On Sep 28, 2010, at 5:01 PM, Sam Sherlock wrote:


Kroc Camen video for everybody
http://camendesign.com/code/video_for_everybody

I think Steve Jobs is thinking about everyone using Safari browser  
(or another modern browser that support h.264 not ff3.6 but ff4  
will maybe, chrome does)


but in reality for now such modern browsers are not as wide spread  
as the  number that will have the flash plugin


even as much as many dislike flash I think many webusers will be  
indifferent about how the video is shown - basic
users just want things to work flash is something that people know  
about at some level


OK..I understand about the video part, but can CSS handle other  
aspects of what Flash is used for, such as animation and  
interactivity?


cs



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread Chris Knowles

try adding display: block - by default they are usually displayed as inline

in ie you need to add them via javascript before it will recognise them:

document.createElement(header);


--
Chris Knowles


On 27/09/10 8:13 PM, tee wrote:

Only the two Webkit browsers are able to render the header and footer 
correctly.

http://lotusseedsdesign.com/css-test/templegate.html

header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}

I can't find anything wrong with my style sheet and the html code.

tee




***
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] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread Hugo Mendes
A best practice: Do browser detection instead.

script type=text/javascript
function html5elm(elm) {
return !!document.createElement(elm);
}

var myArray = ['header','nav','section','aside','article','footer','hgroup'];

for (var i = 0; i  myArray.length; i++){
html5elm(myArray[i]);
}
/script


It will create those elements for IE6-8 (and older browsers with lack
of HTML5 support) in DOM. IE9 support them natively.



HM.


On Mon, Sep 27, 2010 at 11:25 AM, Chris Knowles w...@ckweb.com.au wrote:
 try adding display: block - by default they are usually displayed as inline

 in ie you need to add them via javascript before it will recognise them:

 document.createElement(header);


 --
 Chris Knowles


 On 27/09/10 8:13 PM, tee wrote:

 Only the two Webkit browsers are able to render the header and footer
 correctly.

 http://lotusseedsdesign.com/css-test/templegate.html

 header {
 height : 300px;
 width : 980px;
 text-align : center;
 position : relative;
 clear : both;
 overflow : hidden;
 margin : 0 auto;
 border : 1px solid #369;
 background : #ddd;
 }

 I can't find anything wrong with my style sheet and the html code.

 tee




 ***
 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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread Hugo Mendes
I meant FEATURE Detection. Sorry.

Hm.

On Mon, Sep 27, 2010 at 11:34 AM, Hugo Mendes hugo.men...@gmail.com wrote:
 A best practice: Do browser detection instead.

 script type=text/javascript
 function html5elm(elm) {
        return !!document.createElement(elm);
 }

 var myArray = ['header','nav','section','aside','article','footer','hgroup'];

 for (var i = 0; i  myArray.length; i++){
        html5elm(myArray[i]);
 }
 /script


 It will create those elements for IE6-8 (and older browsers with lack
 of HTML5 support) in DOM. IE9 support them natively.



 HM.


 On Mon, Sep 27, 2010 at 11:25 AM, Chris Knowles w...@ckweb.com.au wrote:
 try adding display: block - by default they are usually displayed as inline

 in ie you need to add them via javascript before it will recognise them:

 document.createElement(header);


 --
 Chris Knowles


 On 27/09/10 8:13 PM, tee wrote:

 Only the two Webkit browsers are able to render the header and footer
 correctly.

 http://lotusseedsdesign.com/css-test/templegate.html

 header {
 height : 300px;
 width : 980px;
 text-align : center;
 position : relative;
 clear : both;
 overflow : hidden;
 margin : 0 auto;
 border : 1px solid #369;
 background : #ddd;
 }

 I can't find anything wrong with my style sheet and the html code.

 tee




 ***
 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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread designer

Tee:  try putting:!--[if IE]
script src=http://html5shiv.googlecode.com/svn/trunk/html5.js;/script
![endif]--
In the head, and/*for html5 in IE*/
article, aside, figure, figcaption, footer, header, mark, menu, nav, 
section, small, time, video {

display : block;
}
(or whatever is relevant) in your CSS.Bob- Original Message - 
From: tee weblis...@gmail.com

To: wsg@webstandardsgroup.org
Sent: Monday, September 27, 2010 11:13 AM
Subject: [WSG] CSS support of HTML5 tags not ready yet?



Only the two Webkit browsers are able to render the header and footer 
correctly.


http://lotusseedsdesign.com/css-test/templegate.html

header {
height : 300px;
width : 980px;
text-align : center;
position : relative;
clear : both;
overflow : hidden;
margin : 0 auto;
border : 1px solid #369;
background : #ddd;
}

I can't find anything wrong with my style sheet and the html code.

tee




***
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] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread David Dorward
 
On 27 Sep 2010, at 11:13, tee wrote:

 Only the two Webkit browsers are able to render the header and footer 
 correctly.


Most browsers don't yet apply default styles to them. Current versions of IE 
don't recognise them at all without a JS shim.

While you can use a JS shim and explicitly set display: block, the rendering 
fails (usually quite badly) if JS or CSS isn't available. I wouldn't depend on 
those elements until HTML5 browsers are common.

-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread tee
Thanks all for the help.

display block it's is. I am so used to expecting Firefox to render everything 
correctly! When it doesn't, I couldn't think further :)

Was going to use modernizr, therefor not worry about IE browsers, but didn't 
realize the script couldn't take care of CSS part.


Are these HTML5 tags inline elements by default or it's that (the latest) 
Firefox and Opera not yet supporting them? I thought they are of block elements.

@David, this is going to be a personal site for me to learn the HTML5, so I am 
not worry the JS part too much.

Without CSS, wouldn't the browsers render the page just like normal HTML page 
with browser default styling? 
Quote Hugo, It will create those elements for IE6-8 (and older browsers with 
lack of HTML5 support) in DOM. I suppose DOM will still work in older IEs when 
CSS is off yes?


tee

On Sep 27, 2010, at 3:50 AM, David Dorward wrote:

 
 On 27 Sep 2010, at 11:13, tee wrote:
 
 Only the two Webkit browsers are able to render the header and footer 
 correctly.
 
 
 Most browsers don't yet apply default styles to them. Current versions of IE 
 don't recognise them at all without a JS shim.
 
 While you can use a JS shim and explicitly set display: block, the rendering 
 fails (usually quite badly) if JS or CSS isn't available. I wouldn't depend 
 on those elements until HTML5 browsers are common.
 
 -- 
 David Dorward
 http://dorward.me.uk
 
 
 
 ***
 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] CSS support of HTML5 tags not ready yet?

2010-09-27 Thread Rob Crowther

On 27/09/10 22:46, tee wrote:

Are these HTML5 tags inline elements by default or it's that (the latest) 
Firefox and Opera not yet supporting them? I thought they are of block elements.

Firefox 4.0 will have support in the default stylesheet for the new 
HTML5 elements.  It'll also have the HTML5 parser enabled by default, 
enabling inline SVG and MathML:


http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg-speed-and-more/

Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS Expandable Menu

2010-07-01 Thread Thierry Koblentz
 As a follow-up to my original email, the following methods have been
 very well designed from the accessibility point of view:
 
 http://juicystudio.com/article/ecmascriptmenu.php
 
 http://www.456bereastreet.com/archive/200705/accessible_expanding_and_c
 o
 llapsing_menu/
 
 
 A further example worth considering:
 
 http://www.splintered.co.uk/experiments/16

This is a different approach as it keeps all the links *visible* (there is
no use of display:none), but it still offers keyboard users a way to skip
sub menus:
 
http://tjkdesign.com/articles/TJK_SlideMenu/TJK_SlideMENU.asp

As a side note, the markup is a DL.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-30 Thread Thierry Koblentz
Hi Mathew,

 http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

 I have a bug report... tested against FF 3.6.4 and IE6 (no bug under
Chrome 5.0.376)

 Steps to reproduce:
 - click on background
 - tab to focus first menu item
 - hit enter to display sub-items
 - tab through to the second menu
 - hit enter to display its sub-items (the first menu closes)
 - hit shift-tab to go back to the first menu

 The bug is either one of a) the first menu shouldn't open as the second
menu is active, or b) that the second menu stays 
 open.


Thanks for the step by step, but unfortunately I cannot reproduce (in
neither one of these browsers).
Could somebody confirm the issue following the steps above?

Thanks.

As a side note, there is something strange in these steps as the first menu
should close before you can even hit enter on the second one. Are you sure
you do not have your mouse cursor over the first tab while checking the
menu? Because that would explain what you describe. 

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-30 Thread Foskett, Mike
Sorry Thierry I only took a quick look at the page and didn't read it fully.

Mike


-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of Thierry Koblentz
Sent: 29 June 2010 17:34
To: wsg@webstandardsgroup.org
Subject: RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS 
Expandable Menu)

Hi Mike,

 Sorry to say this but the keyboard friendly version:
 http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

 Only fires, via keyboard, on Articles E-K in IEv8 or Firefox.

This is by design. Keyboard users could not reach these pages if they were
not focusable at least from the parent page.

The About this solution section says:

Note that keyboard users cannot skip the sub-menu related to the current
page. This is because this sub-menu is exposed to SE (Search Engines) and
thus accessible to keyboard users when JS is off.

The sub-menus open via the *enter key*, this is to allow keyboard users to
skip sub menus so they are not forced to tab through all the menu items.
If the menu is accessible, it is *because* the sub menu related to the
page itself *is* focusable (it is not styled with display:none).


What this menu is missing though is a arrow pointer for *discoverability*. I
have a title in there, but I think it's pretty useless (for 99.99% of
users). If I had time, I'd add arrows and ARIA roles too.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


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
***



Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread David Dorward
 
On 29 Jun 2010, at 00:30, grant_malcolm_bai...@westnet.com.au wrote:

 I'm trying to avoid use of Javascript due to accessibility concerns.

Trying to shoehorn functionality (which is what JS was designed for) into CSS 
(which is designed for presentation, not logic) is not good for accessibility.

The classic example is the drop down menu which, if built using :hover instead 
of JS:

* Can't respond to navigation without a pointer (e.g. keyboard tabbing, or a 
breath switch)
* Can't have any 'fuzz factor' around the pointer position and timing of when a 
menu goes away (so if someone has any trouble at all with motor skills (e.g. 
because they have arthritis) they they could find it very different to get to 
the bottom of a menu without sliding outside it for a second and losing it)
* Can't work in IE6 (since it's support for :hover is poor) (at least not 
without using a really evil hack involving conditional comments and layout 
tables).

JavaScript is not the enemy of accessibility, it just has to be handled with 
care.

If you are worried about pages breaking if JS is not available, then build on 
things that work: 
http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build

-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread Web Dandy
Hi everyone,

 

Can everyone suggest which CSS/JS horizontal and vertical drop down
navigation they would recommend? 

 

Thanks,

 



Elaine Wildash

Web Dandy
Twitter:  http://www.twitter.com/webdandy www.twitter.com/webdandy
Facebook:  http://www.facebook.com/pages/Web-Dandy/171945798743
www.facebook.com/pages/Web-Dandy/171945798743 

  _  

From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of David Dorward
Sent: 29 June 2010 07:15
To: wsg@webstandardsgroup.org
Subject: Using CSS instead of JS for accessibility (was Re: [WSG] CSS
Expandable Menu)

 

 

On 29 Jun 2010, at 00:30, grant_malcolm_bai...@westnet.com.au wrote:





I'm trying to avoid use of Javascript due to accessibility concerns.



 

Trying to shoehorn functionality (which is what JS was designed for) into
CSS (which is designed for presentation, not logic) is not good for
accessibility.

 

The classic example is the drop down menu which, if built using :hover
instead of JS:

 

* Can't respond to navigation without a pointer (e.g. keyboard tabbing, or a
breath switch)

* Can't have any 'fuzz factor' around the pointer position and timing of
when a menu goes away (so if someone has any trouble at all with motor
skills (e.g. because they have arthritis) they they could find it very
different to get to the bottom of a menu without sliding outside it for a
second and losing it)

* Can't work in IE6 (since it's support for :hover is poor) (at least not
without using a really evil hack involving conditional comments and layout
tables).

 

JavaScript is not the enemy of accessibility, it just has to be handled with
care.

 

If you are worried about pages breaking if JS is not available, then build
on things that work:
http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build

 

-- 

David Dorward

http://dorward.me.uk

 


***
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
***image001.gif

RE: [WSG] CSS Expandable Menu

2010-06-29 Thread Grant Bailey
Thank you to everyone who replied to my email.
Kind regards,
Grant Bailey

-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Ted Drake
Sent: Tuesday, 29 June 2010 10:07 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] CSS Expandable Menu


The YUI3 menu widget has great accessibility support
http://developer.yahoo.com/yui/3/node-menunav/

Accessibility  Usability Minded
The MenuNav Node Plugin was built with both accessibility and
usability in mind. The MenuNav Node Plugin implements established mouse
and keyboard interaction patterns to deliver a user experience that is
both familiar and easy to use. To that foundation the MenuNav Node
plugin adds support for screen readers through the use of the WAI-ARIA
Roles and States. Watch this video for a quick a demo of a menu created
using the MenuNav Node Plugin using the WAI-ARIA Roles and States
running in Firefox 3 using the Window-Eyes screen reader.





-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Thierry Koblentz
Sent: Monday, June 28, 2010 4:56 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] CSS Expandable Menu

Hi Grant,

 I'm trying to avoid use of Javascript due to accessibility concerns.

There is no problem with using a javascript powered menu as long as that
menu is accessible with javascript off. As a side note, pure CSS menus
usually come with usability issues.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread John Stericker
I find it's best to do your homework, and shop around.
There are so many options and paths you can go down, and with things changing 
rapidly so often, something that works today, may not work so well tomorrow.
Sitepoint is a good start, they publish a good book By Rachel Andrews, CSS 
Anthology, currently 3rd edition.
She recommends a Javascript version for accessibility. I would agree.
Best of luck on your journey . . .
John

-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of David Dorward
Sent: Tuesday, 29 June 2010 8:22 PM
To: wsg@webstandardsgroup.org
Subject: Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS 
Expandable Menu)

 
On 29 Jun 2010, at 11:04, de...@littlegent.com wrote:

 I'd recommend using one from http://www.cssplay.co.uk/menus/
 
 The trick is deciding which one to use, really. =)


Having taken a quick look, I'd run a mile from them.

The first one I looked at was missing and pointed me somewhere else, which 
assured me that I've love a newer version and directed me to 
http://www.cssplay.co.uk/menus/final_drop.html

It was wrong, I don't love it. It seems to have all the problems I described 
earlier (although it does, at least, bother to have basic links at the top (I 
wonder how many people bother to put something useful that that can substitute 
for the menu on those pages...)

lia href=../menu/index.htmlDEMOS!--[if gte IE 
7]!--/a!--![endif]--
!--[if lte IE 6]tabletrtd![endif]--

This hideous excuse for markup can't be worth removing the dependancy on JS, 
can it? (Especially since you need to implement the same fallbacks anyway!)



-- 
David Dorward
http://dorward.me.uk



***
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: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread daniel a. thornbury
 
I used to use cssplay menus 6+ years ago but they're not the friendliest or 
most compliant to work with. 

I really like superfish - i've been using that for a few years with no problems 
at all. and I find it very easy to customise. 
http://users.tpg.com.au/j_birch/plugins/superfish/

I haven't really drilled down on it but it degrades nicely - works well in IE 
without any weird conditionals - and all my sites are XHTML strict compliant. 

- daniel 
hellodan...@mac.com

On 29/06/2010, at 8:21 PM, David Dorward wrote:

 
 On 29 Jun 2010, at 11:04, de...@littlegent.com wrote:
 
 I'd recommend using one from http://www.cssplay.co.uk/menus/
 
 The trick is deciding which one to use, really. =)
 
 
 Having taken a quick look, I'd run a mile from them.
 
 The first one I looked at was missing and pointed me somewhere else, which 
 assured me that I've love a newer version and directed me to 
 http://www.cssplay.co.uk/menus/final_drop.html
 
 It was wrong, I don't love it. It seems to have all the problems I described 
 earlier (although it does, at least, bother to have basic links at the top (I 
 wonder how many people bother to put something useful that that can 
 substitute for the menu on those pages…)
 
 lia href=../menu/index.htmlDEMOS!--[if gte IE 
 7]!--/a!--![endif]--
 !--[if lte IE 6]tabletrtd![endif]--
 
 This hideous excuse for markup can't be worth removing the dependancy on JS, 
 can it? (Especially since you need to implement the same fallbacks anyway!)
 
 
 
 -- 
 David Dorward
 http://dorward.me.uk
 
 
 
 ***
 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: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread Thierry Koblentz
 Try this for CSS menus with keyboard support:
 http://carroll.org.uk/sandbox/suckerfish/bones2.html

This menu may be accessible, but is it usable?
Unless I am missing something, keyboard users need to go through *every
single link* in the menu to reach the last item :-(

I have these two:

http://tjkdesign.com/articles/new_drop_down/default.asp
http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

They show what's involved and what are the limitations.
Pure CSS menus are a bad idea, and hybrid implementations that claim to be
accessible simply because links are accessible are often bad solutions too.

Imho, users should be able to access all pages within a web site without
frustration.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz










***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread Foskett, Mike
Hey Thierry,

Sorry to say this but the keyboard friendly version: 
http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

Only fires, via keyboard, on Articles E-K in IEv8 or Firefox.

Mike




-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of Thierry Koblentz
Sent: 29 June 2010 16:22
To: wsg@webstandardsgroup.org
Subject: RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS 
Expandable Menu)

 Try this for CSS menus with keyboard support:
 http://carroll.org.uk/sandbox/suckerfish/bones2.html

This menu may be accessible, but is it usable?
Unless I am missing something, keyboard users need to go through *every
single link* in the menu to reach the last item :-(

I have these two:

http://tjkdesign.com/articles/new_drop_down/default.asp
http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp

They show what's involved and what are the limitations.
Pure CSS menus are a bad idea, and hybrid implementations that claim to be
accessible simply because links are accessible are often bad solutions too.

Imho, users should be able to access all pages within a web site without
frustration.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz










***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


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
***



RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread Thierry Koblentz
Hi Mike,

 Sorry to say this but the keyboard friendly version:
 http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
 
 Only fires, via keyboard, on Articles E-K in IEv8 or Firefox.

This is by design. Keyboard users could not reach these pages if they were
not focusable at least from the parent page.

The About this solution section says:

Note that keyboard users cannot skip the sub-menu related to the current
page. This is because this sub-menu is exposed to SE (Search Engines) and
thus accessible to keyboard users when JS is off.

The sub-menus open via the *enter key*, this is to allow keyboard users to
skip sub menus so they are not forced to tab through all the menu items. 
If the menu is accessible, it is *because* the sub menu related to the
page itself *is* focusable (it is not styled with display:none).


What this menu is missing though is a arrow pointer for *discoverability*. I
have a title in there, but I think it's pretty useless (for 99.99% of
users). If I had time, I'd add arrows and ARIA roles too.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)

2010-06-29 Thread Mathew Robertson

  Sorry to say this but the keyboard friendly version:
  http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
 
  Only fires, via keyboard, on Articles E-K in IEv8 or Firefox.

 This is by design. Keyboard users could not reach these pages if they were
 not focusable at least from the parent page.

 The About this solution section says:

 Note that keyboard users cannot skip the sub-menu related to the current
 page. This is because this sub-menu is exposed to SE (Search Engines) and
 thus accessible to keyboard users when JS is off.

 The sub-menus open via the *enter key*, this is to allow keyboard users to
 skip sub menus so they are not forced to tab through all the menu items.
 If the menu is accessible, it is *because* the sub menu related to the
 page itself *is* focusable (it is not styled with display:none).


 What this menu is missing though is a arrow pointer for *discoverability*.
 I
 have a title in there, but I think it's pretty useless (for 99.99% of
 users). If I had time, I'd add arrows and ARIA roles too.


I have a bug report... tested against FF 3.6.4 and IE6 (no bug under Chrome
5.0.376)

Steps to reproduce:
- click on background
- tab to focus first menu item
- hit enter to display sub-items
- tab through to the second menu
- hit enter to display its sub-items (the first menu closes)
- hit shift-tab to go back to the first menu

The bug is either one of a) the first menu shouldn't open as the second menu
is active, or b) that the second menu stays open.

regards,
Mathew Robertson


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS Expandable Menu

2010-06-28 Thread Jelina Korhecz
Hi Grant,

I'm not sure if this is what you're looking for, but this might help:
http://www.alistapart.com/articles/dropdowns

Unfortunately, this does require some javascript as IE doesn't support
a few CSS elements.

Cheers,
Jelina



On Tue, Jun 29, 2010 at 9:30 AM,  grant_malcolm_bai...@westnet.com.au wrote:

 Hello,

 I would be grateful if someone could clarify whether there is such a thing
 as a pure CSS expandable menu. The sort of thing I'm looking for is the
 expandable / collapsible hierachy commonly shown in the left-hand frame of
 Windows programs such as Explorer or Outlook.

 I'm trying to avoid use of Javascript due to accessibility concerns.

 Thank you and regards,

 Grant Bailey
 ***
 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] CSS Expandable Menu

2010-06-28 Thread Stephane Blanchard
Hi Grant,

Maybe this can help: http://free-css-menu.com/vertical-css-menu.html

SteF.

On Mon, Jun 28, 2010 at 7:30 PM, grant_malcolm_bai...@westnet.com.auwrote:


 Hello,

 I would be grateful if someone could clarify whether there is such a thing
 as a pure CSS expandable menu. The sort of thing I'm looking for is the
 expandable / collapsible hierachy commonly shown in the left-hand frame of
 Windows programs such as Explorer or Outlook.

 I'm trying to avoid use of Javascript due to accessibility concerns.

 Thank you and regards,

 Grant Bailey

 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




-- 
stephaneblanchard.ca
designer web
www.twitter.com/stefblanchard
www.facebook.com/stefblanchard


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS Expandable Menu

2010-06-28 Thread Josh Godsiff
If you're talking about a tree-like menu, I've never come across a 
purely CSS one. It strikes me that CSS alone doesn't have the vocabulary 
to deal with something that requires an 'expanded' and 'collapsed' state.


If you're worried about accessibility, either

   * expand it all by default, and use JavaScript to collapse and
 expand it or
   * do a page-reload if there's simply too much content to have it all
 expanded at once. (And then disable that if a user has JS turned on).

This kind of thing is very easily accomplishable with something like 
jQuery, and you can generally work through or around any accessibility 
concerns.


- Josh
-- www.oxideinteractive.com.au

On 29/6/2010 9:30 AM, grant_malcolm_bai...@westnet.com.au wrote:


Hello,

I would be grateful if someone could clarify whether there is such a 
thing as a pure CSS expandable menu. The sort of thing I'm looking for 
is the expandable / collapsible hierachy commonly shown in the 
left-hand frame of Windows programs such as Explorer or Outlook.


I'm trying to avoid use of Javascript due to accessibility concerns.

Thank you and regards,

Grant Bailey
***
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] CSS Expandable Menu

2010-06-28 Thread Sam Dwyer
Hi Grant,
It’s great you’re looking for an accessible menu solution, but I’d recommend 
not throwing away javascript solutions in the process.
Yahoo has some great information on adding WAI-Aria roles and states to menu 
buttons using javascript that you may be able to adapt for your purposes 
without too much trouble.
http://developer.yahoo.com/yui/3/examples/node-focusmanager/node-focusmanager-3.html

They also provide a menu plugin that might be useful to you.
http://developer.yahoo.com/yui/examples/menu/menuwaiaria.html

Cheers,
S

From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of grant_malcolm_bai...@westnet.com.au
Sent: Tuesday, 29 June 2010 9:31 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] CSS Expandable Menu


Hello,

I would be grateful if someone could clarify whether there is such a thing as a 
pure CSS expandable menu. The sort of thing I'm looking for is the expandable / 
collapsible hierachy commonly shown in the left-hand frame of Windows programs 
such as Explorer or Outlook.

I'm trying to avoid use of Javascript due to accessibility concerns.

Thank you and regards,

Grant Bailey


Please consider the environment before printing this e-mail.

The information contained in this email and any attachment is confidential and
may contain legally privileged or copyright material.   It is intended only for
the use of the addressee(s).  If you are not the intended recipient of this
email, you are not permitted to disseminate, distribute or copy this email or
any attachments.  If you have received this message in error, please notify the
sender immediately and delete this email from your system.  The ABC does not
represent or warrant that this transmission is secure or virus free.   Before
opening any attachment you should check for viruses.  The ABC's liability is
limited to resupplying any email and attachments.

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] CSS Expandable Menu

2010-06-28 Thread Seona Bellamy
Hi Grant,

You're meaning the sort of tree-menu arrangements that have a little plus
next to items with children, and clicking the plus makes the children appear
and push the other elements further down, right?

I don't believe what you're looking for is possible, as that sort of
hierarchical menu requires changes that stick rather than just activating
on hover. CSS just isn't designed to do that sort of thing.

Then again, JavaScript doesn't automatically mean inaccessible. What
concerns in particular did you have about JS making the menu inaccessible?

Cheers,

Seona.

On 29 June 2010 09:30, grant_malcolm_bai...@westnet.com.au wrote:


 Hello,

 I would be grateful if someone could clarify whether there is such a thing
 as a pure CSS expandable menu. The sort of thing I'm looking for is the
 expandable / collapsible hierachy commonly shown in the left-hand frame of
 Windows programs such as Explorer or Outlook.

 I'm trying to avoid use of Javascript due to accessibility concerns.

 Thank you and regards,

 Grant Bailey

 ***
 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] CSS Expandable Menu

2010-06-28 Thread Thierry Koblentz
Hi Grant,

 I'm trying to avoid use of Javascript due to accessibility concerns.

There is no problem with using a javascript powered menu as long as that menu 
is accessible with javascript off.
As a side note, pure CSS menus usually come with usability issues.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS Expandable Menu

2010-06-28 Thread Ted Drake
The YUI3 menu widget has great accessibility support
http://developer.yahoo.com/yui/3/node-menunav/

Accessibility  Usability Minded
The MenuNav Node Plugin was built with both accessibility and usability in 
mind. The MenuNav Node Plugin implements established mouse and keyboard 
interaction patterns to deliver a user experience that is both familiar and 
easy to use. To that foundation the MenuNav Node plugin adds support for screen 
readers through the use of the WAI-ARIA Roles and States. Watch this video for 
a quick a demo of a menu created using the MenuNav Node Plugin using the 
WAI-ARIA Roles and States running in Firefox 3 using the Window-Eyes screen 
reader.





-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of Thierry Koblentz
Sent: Monday, June 28, 2010 4:56 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] CSS Expandable Menu

Hi Grant,

 I'm trying to avoid use of Javascript due to accessibility concerns.

There is no problem with using a javascript powered menu as long as that menu 
is accessible with javascript off.
As a side note, pure CSS menus usually come with usability issues.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz






***
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] CSS off button

2010-02-07 Thread Jayachandran Kandasamy
Hi  Paul,

You can use select drop down box instead of buttons for the CSS switching -
this can minimize the space in page and usability will be effective for the
end users

On Thu, Feb 4, 2010 at 8:51 PM, Paul Novitski p...@juniperwebcraft.comwrote:

 At 2/4/2010 10:43 AM, Erickson, Kevin (DOE) wrote:

 Here is the page using your example: 
 http://www.doetest.vi.virginia.gov/z_testing_area/kevin/test-css-off-from-wsg2.shtml
 
 http://www.doetest.vi.virginia.gov/z_testing_area/kevin/test-css-off-from-wsg2.shtml



 I recommend that you give folks a corresponding button to turn styling back
 on after they switch it off.


 Paul
 __

 Paul Novitski
 Juniper Webcraft Ltd.
 http://juniperwebcraft.com


 ***
  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] CSS Validation Error

2010-02-04 Thread David Dorward
 
On 4 Feb 2010, at 07:42, Joshua Street wrote:
 The validator does correctly parse as per the spec. The spec defines a way 
 for vendor prefixes to exist without conflicting with anything in CSS, no 
 more. This makes them part of the grammar, not the vocabulary, and the 
 validator checks both. The CSS 2.1 specification says Authors should avoid 
 vendor-specific extensions.
 
 I agree vendor-specific extensions do not constitute acceptable
 vocabulary, but as the specification allows a grammatical means for
 their inclusion it seems counter-productive to flag them as errors.

It provides a means for vendors to experiment without conflicting with real 
CSS, and for authors to *test* those features.

 The specification assures authors and vendors that An initial dash or
 underscore is guaranteed never to be used in a property or keyword by
 any current or future level of CSS - and, accordingly, they are (and
 will remain) grammatically permissible / safe for use. The imperative
 to avoid these extensions lacks explanation and, while this list is
 (by virtue of our name!) perhaps not the place for such views, seems
 to stem from the desire to preserve the appearance of standardisation
 rather than maximising the utility and flexibility of the standard in
 question.

The appearance of standardisation? The whole point of vendor extensions is that 
they are non-standard. Some of them are experimental implementations of 
standard features, some of them are experimental implementations of proposed 
features which may appear in future standards, some of them are outright 
proprietary. They are not standard.

 As a counterpoint to this, of course, using standards-compliant
 techniques to achieve an outcome will more successfully preserve
 interoperability into the future. However, I would assert the advice
 to avoid vendor-specific extensions should be constrained by this,
 rather than suggesting that a guaranteed future-compatible (albeit
 potentially no longer functional, contingent on ongoing vendor
 support) identifier should be avoided unswervingly.

They aren't guaranteed future-compatible. 

Vendor: We propose this feature and have implemented this as -vendor-foo

Other Vendor: Well, it has these problems, what if ...

Vendor: OK. We've changed the way it works.

All the slightly older clients supporting the original implementation promptly 
break.


How would this be implemented anyway?

Anything that looks like a vendor prefix works?

-moz-bowder-wadius: 

Congratulations! It is valid! 

But why doesn't it work?

Or does someone try to maintain a list of all the different extensions? The CSS 
2.1 specification lists 12 known vendors who use the vendor prefix. Who is 
going to maintain a central list of all proprietary extensions and the values 
they accept? How would they be versioned?


-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] CSS off button

2010-02-04 Thread Erickson, Kevin (DOE)
Thanks Jayachandran!
 
That definitely works but is there a way that it could keep the CSS off
when the visitor leaves the page? Using a cookie maybe?
Here is the page using your example:
http://www.doetest.vi.virginia.gov/z_testing_area/kevin/test-css-off-fro
m-wsg2.shtml
 
Thank you,
Kevin



From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Jayachandran Kandasamy
Sent: Wednesday, January 27, 2010 2:25 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS off button


Hi Kevin,
 
I have tried some sample code for switching off the CSS in jQuery.
 
Please go through this code below and let me know how far it is helping
you - if need anyother assistance please reply 
 
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
HTML
HEAD
TITLE New Document /TITLE
META NAME=Generator CONTENT=EditPlus
META NAME=Author CONTENT=
META NAME=Keywords CONTENT=
META NAME=Description CONTENT=
script src=http://code.jquery.com/jquery-latest.js;/script
http://code.jquery.com/jquery-latest.js%22%3E%3C/script 
link href=css/sample.css type=text/css rel=stylesheet/
style type=text/css
body {
 background-color: #acc;
 color: #fff;
 font-size: 25px;
}
/style
style type=text/css
.chumma {
 background-color: #ff9900;
 color: #123456;
 font-size: 30px;
 width: 500px;
 height: 500px;
}
/style
script type=text/javascript
 $(document).ready(function(){
  $(input.offButt).click(function() {
   if($(head:has(style))  $(head:has(link))){
$(head:has(style)).remove();
$(head:has(link)).remove();
   }
  });
 });
/script
/HEAD
BODY
Sample for CSS off
form name=sampleForm
input type=button value=Click to Off the CSS class=offButt
id=offButt /
div class=chummaHi Kevin/div
div class=nameWebsite group - Kevin/div
/form
/BODY
/HTML

Thanks,
JC

On Fri, Jan 22, 2010 at 12:22 PM, Erickson, Kevin (DOE)
kevin.erick...@doe.virginia.gov wrote:


Hello fellow WSG'ers.
 
Could anyone please tell me if there is a right way to put a
clickable button in a web page that will turn off all CSS?
 
Thanks,
Kevin


***
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.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


RE: [WSG] CSS off button

2010-02-04 Thread Erickson, Kevin (DOE)
Sorry. That question wasn't very clear. I meant when the visitor goes to
other pages on the site I would like the CSS to remain off using a
cookie. Do you have a way to do that?



From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Erickson, Kevin (DOE)
Sent: Thursday, February 04, 2010 1:44 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] CSS off button


Thanks Jayachandran!
 
That definitely works but is there a way that it could keep the CSS off
when the visitor leaves the page? Using a cookie maybe?
Here is the page using your example:
http://www.doetest.vi.virginia.gov/z_testing_area/kevin/test-css-off-fro
m-wsg2.shtml
 
Thank you,
Kevin



From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Jayachandran Kandasamy
Sent: Wednesday, January 27, 2010 2:25 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS off button


Hi Kevin,
 
I have tried some sample code for switching off the CSS in jQuery.
 
Please go through this code below and let me know how far it is helping
you - if need anyother assistance please reply 
 
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
HTML
HEAD
TITLE New Document /TITLE
META NAME=Generator CONTENT=EditPlus
META NAME=Author CONTENT=
META NAME=Keywords CONTENT=
META NAME=Description CONTENT=
script src=http://code.jquery.com/jquery-latest.js;/script
http://code.jquery.com/jquery-latest.js%22%3E%3C/script 
link href=css/sample.css type=text/css rel=stylesheet/
style type=text/css
body {
 background-color: #acc;
 color: #fff;
 font-size: 25px;
}
/style
style type=text/css
.chumma {
 background-color: #ff9900;
 color: #123456;
 font-size: 30px;
 width: 500px;
 height: 500px;
}
/style
script type=text/javascript
 $(document).ready(function(){
  $(input.offButt).click(function() {
   if($(head:has(style))  $(head:has(link))){
$(head:has(style)).remove();
$(head:has(link)).remove();
   }
  });
 });
/script
/HEAD
BODY
Sample for CSS off
form name=sampleForm
input type=button value=Click to Off the CSS class=offButt
id=offButt /
div class=chummaHi Kevin/div
div class=nameWebsite group - Kevin/div
/form
/BODY
/HTML

Thanks,
JC

On Fri, Jan 22, 2010 at 12:22 PM, Erickson, Kevin (DOE)
kevin.erick...@doe.virginia.gov wrote:


Hello fellow WSG'ers.
 
Could anyone please tell me if there is a right way to put a
clickable button in a web page that will turn off all CSS?
 
Thanks,
Kevin


***
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.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] CSS Validation Error

2010-02-04 Thread James Ellis
Hi

I guess it's understand the consequences and use at your own risk. I doubt a
vendor will change the spelling and if they do, I'm pretty sure they'd
maintain BC by allowing both to work.
Using the example of *-radius, the vendor differences are more to do with
what the values selected will render as rather than the naming, for instance
webkit allows elliptical curves while moz only allows regular curves:
http://www.css3.info/border-radius-apple-vs-mozilla/
Apparently, webkit more closely resembles the CSS3 spec. Mozilla may change
their interpretation leading to possibly unexpected results (which you can
then fix).

Opera is apparently going to be supporting 'border-radius' in an upcoming
Presto release.

The end-goal is for all the major browsers to switch to border-radius and
then ignore their vendor specifc version, to avoid conflicts.

There are plenty of options to create curve-edged boxes but the CSS method
is the easiest programatically to implement, followed by creating PNG
quadrants on the fly with Imagick or similar and positioning them using CSS.
Opera allows SVG backgrounds,
so they can be created on-the-fly as XML. Plenty of designers cap a box top
and bottom with two curved slices but that's a pain to implement in flexible
layouts.

To answer a question further back, yes border-radius should be last in the
list after the vendor extensions.

Cheers
James



 They aren't guaranteed future-compatible.

 Vendor: We propose this feature and have implemented this as -vendor-foo

 Other Vendor: Well, it has these problems, what if ...

 Vendor: OK. We've changed the way it works.

 All the slightly older clients supporting the original implementation
 promptly break.


 How would this be implemented anyway?

 Anything that looks like a vendor prefix works?

 -moz-bowder-wadius:

 Congratulations! It is valid!

 But why doesn't it work?

 Or does someone try to maintain a list of all the different extensions? The
 CSS 2.1 specification lists 12 known vendors who use the vendor prefix. Who
 is going to maintain a central list of all proprietary extensions and the
 values they accept? How would they be versioned?




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

  1   2   3   4   5   6   7   8   9   10   >