Re: [WSG] attribute selectors and validation
- Original Message -
From: "Tim White"
To:
Sent: Friday, July 02, 2010 6:26 PM
Subject: Re: [WSG] attribute selectors and validation
[big snip]
That said, attribute selectors are very useful.
***
Of course, and it's worth pointing out that:
h1[title^="main"] {color : blue;} , used with:
Bla Bla Bla Bla Bla Bla
IS valid. It's not something I'd use though, whereas:
a[title^="opens"] {
padding-right: 13px;
background: url(outofit.gif) no-repeat right top;
}
seems good when used with:
onclick="window.open(this.href); return false;">Bla Bla Bla Bla Bla Bla
Doesn't it? (But not IE6 . . . )
Bob
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] attribute selectors and validation
> > Regarding performance, using a class may be a better choice: > > > > https://developer.mozilla.org/en/writing_efficient_css > > > Interesting article. I wonder if it is still true -- the last update > was 2000 for that page. 2000 is the date for when the original article "http://www.mozilla.org/xpfe/goodcss.html"; was last updated, but the date for this rewritten piece is March 2010. > It also says "Avoid the descendant selector" which would be rather > annoying. Yes, it says: "The descendant selector is the most expensive selector in CSS.. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category." -- 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] attribute selectors and validation
On Fri, Jul 2, 2010 at 1:48 PM, Thierry Koblentz wrote: > > Regarding performance, using a class may be a better choice: > > https://developer.mozilla.org/en/writing_efficient_css Interesting article. I wonder if it is still true -- the last update was 2000 for that page. It also says "Avoid the descendant selector" which would be rather annoying. Tim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] attribute selectors and validation
> > At the very basic level, the article exemplifies
> h1[rel="external"]{color :
> > red;} used with the html:
> >
> > Attribute Equals
>
>
> As others have said, this is an invalid use of rel. We could change
> his example from:
>
> David Walsh
>
> To
>
> David Walsh
>
> (I'd also get rid of "first-title"...)
>
>
> That said, attribute selectors are very useful. Think about a form.
> Instead of adding a class to all text input boxes, you can style them
> with a simple:
>
> input[type="text"] {/* whatever styles */}
>
> For links, how about:
>
> a[href^="http"] {/* links starting with http */}
>
> a[rel] {/* any link with a rel attribute */}
Regarding performance, using a class may be a better choice:
https://developer.mozilla.org/en/writing_efficient_css
--
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] attribute selectors and validation
> In a recent "links for light reading" reference was made to a very
> interesting article by Chris Coyier on attribute selectors such as 'rel'.
>
> At the very basic level, the article exemplifies h1[rel="external"]{color :
> red;} used with the html:
>
> Attribute Equals
As others have said, this is an invalid use of rel. We could change
his example from:
David Walsh
To
David Walsh
(I'd also get rid of "first-title"...)
That said, attribute selectors are very useful. Think about a form.
Instead of adding a class to all text input boxes, you can style them
with a simple:
input[type="text"] {/* whatever styles */}
For links, how about:
a[href^="http"] {/* links starting with http */}
a[rel] {/* any link with a rel attribute */}
-Tim
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] attribute selectors and validation
On 02/07/2010 13:09, designer wrote:
In a recent "links for light reading" reference was made to a very
interesting article by Chris Coyier on attribute selectors such as 'rel'.
http://css-tricks.com/attribute-selectors/
At the very basic level, the article exemplifies
h1[rel="external"]{color : red;} used with the html:
Attribute Equals
I tried this, and several other really useful examples, but later found
that the validator doesn't like it/them, saying:
there is no attribute "rel"
You have used the attribute named above in your document, but the
document type you are using does not support that attribute for this
element. This error is often caused by incorrect use of the "Strict"
document type with a document that uses frames (e.g. you must use the
"Transitional" document type to get the "target" attribute), or by using
vendor proprietary extensions such as "marginheight" (this is usually
fixed by using CSS to achieve the desired effect instead).
Do we just ignore this? I always thought of 'rel' being used with links,
but on playing about I find that works fine too.
I think the example used in that article is quite unfortunate and a bit
removed from real world use...why would you have a rel on the h1 or div?
Makes no sense semantically, and seemed a very stilted bit of code just
so he could then show the example with attribute selectors.
I'd say no, don't ignore it. Stick with valid markup. In the case of the
h1 there it seems far more logical to use a class name...just because
you can now do attribute selectors, doesn't mean that the old tried
techniques are not valid.
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] attribute selectors and validation
I think it's best to ask W3 in this occasion: - http://www.w3.org/TR/html401/struct/links.html#adef-rel Also, this article can help, too: - http://reference.sitepoint.com/html/link/rel In a short this attribute means relationship of link to your document, so it's reasonably used with link elements. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
