Warning:
This wiki has been archived and is now read-only.
StyleAttribute
HTML5 Issue: Element Styling
Requirement
A way of applying style to individual elements in a document in cases where the style is not known at the time of the global site design.
Status: Unresolved
Use cases
- #wysiwyg WYSIWYG editors
- #non-wysiwyg Non-WYSIWYG editors
- #html-versions Computer-generated HTML versions of other document formats
- #external-material Styling of external material (e.g. advertisements)
- #small-adjustments Very specific small adjustments to a page
- #dom-serialization Serialization of DOM
- #embedding HTML embedded to other applications
- #debugging Debugging
- #graphs Graphs and diagrams
WYSIWYG editors
WYSIWYG editors need to save the styles the user decided to choose, without any information about the intentions for such styling. (#discuss-wysiwyg Discussion)
Non-WYSIWYG editors
Non-WYSIWYG editors (forums, blogs and wikis) offer only a limited set of HTML features to users. But often users want to use arbitrary styles, that can't be predefined by application. (#discuss-non-wysiwyg Discussion)
Computer-generated HTML versions of other document formats
Programs that convert documents in other formats to HTML often don't have the semantical information about the meaning of styles in the convertable document. (#discuss-html-versions Discussion)
Styling of external material (e.g. advertisements)
External content providers need to ensure, that the styles will remain the same in the context of any other page. (#discuss-external-material Discussion)
Very specific small adjustments to a page
If you only want to adjust one single place in one single page, adding style element and new class or id is too complicated. (#discuss-small-adjustments Discussion)
Serialization of DOM
When serializing DOM the dynamically set styles need also to be serialized. (#discuss-dom-serialization Discussion)
HTML embedded to other applications
Transmission of fragments of HTML with their styles preserved. (#discuss-embedding Discussion)
Debugging
There is a need for a standards-based way of settings styles for individual elements. (#discuss-debugging Discussion)
Graphs and diagrams
In dynamically created graphs and diagrams many elements need really varying styling. (#discuss-graphs Discussion)
Possible Solutions
- #style-attribute The style attribute
- #style-attribute-extended Style attribute with extended syntax
- [[#font-element with WYSIWYG signaturet]]
- #style-element-scoped <style scoped>
- #localstyle <localstyle> element
- #style-element <style> in <head> + selectors
- #presentational-attributes Individual presentation-oriented attributes
Note that according to current draft, and <style scoped> are to be used together.</i>
The style attribute
Pros:
- Short and concise in simple cases
- Part of the HTML4 spec - #research-google-code well understood by authors
- Works in existing UAs
Cons:
- #discuss-style-attribute-has-no-media Does not allow media-specific styles
- May encourage authors to use inline style where not appropriate
Debatable:
Style attribute with extended syntax
Pros:
- Short and concise in simple cases
- Is a CSS WG working draft
- Partly works in existing UAs
- #discuss-extending-style-attribute Allows per-media styles
Cons:
- May encourage authors to use inline style where not appropriate
with WYSIWYG signature
Pros:
- Works in existing UAs ???
- #discuss-hixie-reasoning-of-font May encourage authors to use style attribute less often
Cons:
- Does not allow styling of replaced content (e.g. size of image, but there are width= and height= attributes already) or non-inherited style properties (e.g. borders)
- More verbose than just using the style attribute directly
- Promotes presentational information to the level of an element (negative impact on source readability?)
- #discuss-style-attribute-has-no-media Does not allow media-specific styles (probably not a needed feature, considering the WYSIWYG signature)
- #discuss-why-font Not better for WYSIWYG editors than global style="" attribute
- #discuss-new-transitional-doctype WYSIWYG signature might become the new Transitional doctype
Does not resolve: #external-material External material, #small-adjustments Small adjustments, #dom-serialization Serialization of DOM, #embedding embedded HTML, #debugging Debugging, #graphs Graphs and diagrams. <i>(Assuming, that WYSIWYG signature applies to wider range of applications, not just WYSIWYG editors.)</i>
<style scoped>
Pros:
- Allows per-media styles
Cons:
- #discuss-backwards-scoped-style Incorrect rendering in existig UAs
- Verbose in simple (one element) case
- Does not allow styling of void elements
Does not resolve: #dom-serialization Serialization of DOM, #debugging Debugging.
<localstyle> element
Pros:
- #discuss-localstyle Does not render incorrect in existing UAs
- Allows per-media styles
Cons:
- Verbose in simple (one element) case
- Does not allow styling of void elements
- Stylesheet content has to be hidden to existing UAs using comment marks and/or CDATA marks (when in XML serialization)
Does not resolve: #dom-serialization Serialization of DOM, #debugging Debugging.
<style> in <head> + selectors
Pros:
- Works in existing UAs
- Allows per-media styles
Cons:
- Requires access to the <head>
- Verbose in single element case
Does not resolve: #external-material External material, #dom-serialization Serialization of DOM, #embedding Embedding, #debugging Debugging.
Individual presentation-oriented attributes
Pros:
- Works in existing UAs
- Possible to limit attributes to those which make sense in the context of a specific element
Cons:
- No way to reuse information across multiple elements
- Requires tight coupling of style and HTML; no possibility to use extra CSS properties as they are introduced without updating HTML
- Many attributes needed on a single element; reduces source readability
- No way of providing media-specific style
Discussion
- #discuss-wysiwyg WYSIWYG editors
- #discuss-non-wysiwyg Non-WYSIWYG editors
- #discuss-html-versions Computer-generated HTML versions of other document formats
- #discuss-external-material Styling of external material (e.g. advertisements)
- #discuss-small-adjustments Very specific small adjustments to a page
- #discuss-dom-serialization Serialization of DOM
- #discuss-embedding HTML embedded to other applications
- #discuss-debugging Debugging
- #discuss-graphs Graphs and diagrams
- #discuss-style-structure-separation Separation of style and structure by style attribute
- #discuss-backwards-scoped-style Backwards compatability of scoped style
- #discuss-localstyle <localstyle> element
- #discuss-style-attribute-has-no-media Style attribute has no media information
- #discuss-extending-style-attribute Extending the style attribute
- #discuss-why-font Why bring back the font element?
- #discuss-new-transitional-doctype WYSIWYG signature might become the new Transitional doctype
- #discuss-henri-suggestion A Proposal By Henri Sivonen
WYSIWYG editors
Current draft allows the use of style attribute in font element for WYSIWYG editors. The document has to include the WYSIWYG signature. HTML 5 Working Draft, 9.1. Presentational markup, 28 June 2007.
There have been multiple concerns about the choice of font element for that purpose. See: #discuss-why-font Why bring back the font element?
Non-WYSIWYG editors
Non-WYSIWYG editors, such as forums, blogs and wikis which use BBCodes or a limited subset of HTML. If the user, for whatever reason, wants to make a paragraph coloured #382f5c, the only current way to do so is a style attribute. Dannii Willis, Wed, 27 Jun 2007
Computer-generated HTML versions of other document formats
The best example is Google giving you the HTML version of .doc or .pdf document. Rene Saarsoo, Sat, 30 Jun 2007.
Styling of external material (e.g. advertisements)
Take advertising agencies that deliver ad code to commercial websites.
Considering a really simple banner ad where the ad company only wants to make sure there appears no border around the banner, there are basically three options:
- Hope for each partner to remove an eventual border. (Doesn't work.)
- Delivering the ad with 'border="0"' (or worse). (Presentational.)
- Delivering the ad with 'style="border: 0;"'. (More kids in town.)
Jens Meiert, Tue, 26 Jun 2007.
Very specific small adjustments to a page
I worked regularly on a site whose authors used regularly to usein order to adjust letter spacing and font sizing so that
headlines of news stories would always take up equal horizontal room.
Bruce Lawson, Mon, 25 Jun 2007.
I know of several sites that used a CMS in which the editor could specify a specific background image for a news item. This required setting background-image in the style attribute when listing the items (the base formatting was of course handled in a separate CSS file).
The programming paradigm of many CMS templating systems relies on UI fragments. Often, these fragments are "self contained" in such that a controller decides what happens in each fragment. Outputting a style definition in the html head is often more complicated than using the inline style attribute to provide "custom" style changes.
Peter Krantz, Sun, 1 Jul 2007.
Serialization of DOM
The changes to the .style property are reflected in the style attribute in the DOM, and without the attribute, there would be no conforming way to serialize the DOM after modifying the .style property. Lachlan Hunt, Sat, 30 Jun 2007.
HTML embedded to other applications
One use case for style attributes is syndication. Here's an example. Sam Ruby, Sun, 24 Jun 2007.
Syndication is also addressed by <style scope>. Anne van Kesteren, Sun, 01 Jul 2007.
Debugging
It's really useful for debugging. It's clearly THE easiest ways to style a single element. Rene Saarsoo, Sat, 30 Jun 2007.
The attribute will still be supported, and it's use in debugging, as opposed to a production environment, is not really a reason for it to be considered conforming. Lachlan Hunt, Sat, 30 Jun 2007.
I think debugging is an important usecase. Your debugging tool might display an error for incorrect and that would prevent you from using the style= attribute. Anne van Kesteren, Sun, 01 Jul 2007.
Graphs and diagrams
One example is Tag clouds (like in Flickr).
There are alternatives for tag clouds, which are being investigated by the microformats community. (Tagcloud brainstorming.) Lachlan Hunt, Sat, 30 Jun 2007.
Another example is Bar graphs (like in this page).
This is already solved using the new <meter> element. Lachlan Hunt, Sat, 30 Jun 2007.
Separation of style and structure by style attribute
[The style attribute] keeps the separation between style and structure; by filtering out everything called "style" your structure and content remains. Håkon Wium Lie, Sun, 24 Jun 2007.
The other benefit of stylesheets is to separate the content from the presentation, but if my application is PHP (or even XSLT! where @style has also come in handy to me!) that separation doesn't benefit me more than it hurts. Jon Barnett, Mon, 25 Jun 2007.
Backwards compatability of scoped style
Yes, the @scoped attribute does look quite interesting, but how many years do we have to wait until the browsers support it? - will it make it into IE10 for instance? Craig Francis, Sun, 24 Jun 2007.
Also, that [style attribute] draft's new rules for @style are backward compatible, where I don't see how
<localstyle> element
As many have pointed out, style element with scoped attribute is not backwards compatible. To resolve this problem, I propose a new element instead. e.g. <localstyle> or <scopedstyle>. Authors can use HTML comments to hide contents of the new element from older user-agents. Rene Saarsoo, Tue, 03 Jul 2007.
Style attribute has no media information
The problem with the style= attribute, as opposed to the <style> element. Is that it encourages media specific style sheets. As the media for the style= attribute is automatically "all". It also does not allow for alternate style sheets. The <style> element in HTML5 handles both. Anne van Kesteren, Sun, 24 Jun 2007.
In most most cases where @style is used, it's used in a way that the media
doesn't matter... if I wrote- I don't
care whether the media is paged, on screen, or printed. If the media is
aural, that property is irrelevant. I imagine that most use cases for
"style" are like that. I'm aware that if I wanted alternate stylesheets, I
would need to take those styles out into a stylesheet.
Jon Barnett, Mon, 25 Jun 2007.
Most stylesheets included with non-scoped <style> or with <link> do not set media-scoped styles. @media rules are rare, and <link rel="stylesheet"> rarely specifies a media attribute. Given this, there is little evidence that authors will be more likely to scope their styles to particular media just because they have a mechanism that allows it. And indeed, for many styles, doing so is not needed to achieve media-independent styling. For instance, property definitions like "font-weight: bold" or "font-size: 2em" don't really need to be set differently between different visual media and are irrelevant to non-visual media. Including both style="" and <style scoped> would allow a convenient way to set local styles that degrades gracefully, as well as a less backwards compatible but more powerful mechanism that allows media selection and full rules with selectors. - Maciej Stachowiak, Mon, 2 Jul 2007.
- [19:53] <zcorpan> Hixie: the result will be that those who hand-write templates will add the <meta> to claim that they are wysiwyg. so they can use style="" and pass validation
- [19:53] <zcorpan> q.v. transitional doctype and target=""
- [19:53] <zcorpan> *or* they will come up with uglier hacks
- [19:53] <zcorpan> q.v. adding target="" with javascript
- [19:56] <zcorpan> so if we find that we need to allow something for wysiwyg, it has to be conforming for anyone (yet we can discourage or say that authors SHOULD NOT do it or whatever, but trying to force them not to will lead to the same path as target="" situation today, i think)
- [19:59] <zcorpan> or say that it isn't conforming but say that wysiwyg tools can emit it anyway
- [20:00] <zcorpan> what i'm saying is that the wysiwyg meta tag is the new transitional doctype
- Make style="" a global attribute. For the purposes of document conformance, make it conforming on all documents regardless how they came to being.
- Include an informative paragraph about how media-dependent use of style="" is bad.
- make the conformance checker emit a warning (at most one per document) that paraphrases the informative paragraph when the conformance checker sees a style="" attribute.
- make the WYSIWYG signature suppress the warning.
- is either made non-conforming or made a strictly inline element with the attribute color (to avoid cruft).
Extending the style attribute
I think the CSS3 WG on the style attribute syntax is actually a more elegant approach (and easier to understand for authors) than the scoped style element. The scoped style element has a lot of opportunities to be misunderstood by implementors and authors alike. I don't think [scoped style] adds anything that the CSS3 style attribute doesn't already make possible (and some CSS3 is already being implemented by some early-adopter implementations). In contrast, the changes to the style attribute will be easy for everyone to understand. Robert Burns, Sun, 24 Jun 2007.
Why bring back the font element?
WYSIWYG editors use font tags because that's what IE does generate with the execCommand, but what it does generate is or (well, in uppercase and without quotes, but let's forget that for a moment), it doesn't understand so if any editor wants to work the way proposed in this spec and also being used by IE users, then it will need to do all the work to format the text, so in the end it can do it with font or with any other tag, being it for example or whatever you like. Alfonso Martínez de Lizarrondo, Sun, 24 Jun 2007.
Bringing back the font element to HTML 5 might send a wrong signal to web authors. There have been a lot of educational work done about the bad sides of font element. Rene Saarsoo, Sat, 30 Jun 2007.
The idea of making style="" only apply to was that we could attach the stigma of to style="". Ian Hickson, Thu, 3 May 2007.
WYSIWYG signature might become the new Transitional doctype
IRC log, Fri, 4 May 2007.
A proposal by Henri Sivonen
Henri Sivonen, Fri, 4 May 2007.
Research
According to Hixie's research the style attribute is used on ~ 13.5% of <a> elements, 10.9% of
elements and 10.6% of <img> elements.