- From: Alan Gresley <alan1@azzurum.com>
- Date: Thu, 14 Feb 2008 09:48:58 -0700
- To: Brad Kemper <brkemper@comcast.net>
- cc: www-style@w3.org
Brad Kemper wrote: > I'm not sure what you are getting at here. If it is defining the > descendants, that can be done more simply, without the extra > brackets. I would do it like this: > [...] > > since everything within the @contant will have a specificity 100 > > plus there own specificity on top. > > No, I would not have some sort of magic change to the the specificity > because of the way the selectors were generated from a variable. That > just complicates it and makes it more confusing. There is nothing to > be gained by setting it any higher than its contents. I see that we are seeing different things here and different constructions. I now understand what the placeholder is. Before delving into this I will clarify my part of the proposal. Please compare this CSS which I currently use in a CSS styled list menu. http://css-class.com/test/demos/contant/original.css with this CSS. http://css-class.com/test/demos/contant/propose.css Please note that I have changed the #navigation from the <ul> to it parent <div> to allow for the constant (my idea of operation) to operate. The propose CSS has a constant block. @constant (div#navigation, div#menu, nav) { /* each selector within this block has its' own specificity plus the specificity of the block that it occurs in */ } I follow the propose CSS better within the constant block since it doesn't have #navigation appearing everywhere. The complexity of the stylesheet when chaining each of div#navigation, div#menu and nav together is greater. http://css-class.com/test/demos/constant/original-added.css The differences in size between the stylesheets is very small: original.css = 4.62 kb propose.css = 4.75 kb original-added.css = 6.70 kb But considering that this can apply to div#navigation, div#menu and nav in one hit. So this is sort of what Jens' was seeking. 1. Styling variable HTML with a CSS constant 2. Creating a smaller and easy to follow stylesheet which can be written quicker. Brad Kemper also wrote: > I'm not sure what you are getting at here. If it is defining the > descendants, that can be done more simply, without the extra > brackets. I would do it like this: > > /* create constant called MYNAVS and assign selectors to it: */ > @constant MYNAVS( nav, #sidenav, #topnav ) > > /* now use MYNAVS as placeholders of those three selectors */ > MYNAVS ul {list-style: none;} > MYNAVS li (float: left;} > MYNAVS a {display: block;} > MYNAVS a:link, MYNAVS a:visited {color: black; background-color: > yellow; } > MYNAVS a:hover {background-color: black; color: yellow; } > MYNAVS a:active { background-color:black; color:red; } This has the extra MYNAVS proceeding the list menu type selectors which I wish to avoid. This MYNAVS has to be repeated in each selector of the CSS for the menu. I am most likely getting the syntax all messed up but I hope it shows what I'm getting at. It could even be like media queries. @constant nav (div#navigation, div#menu); and @constant nav (div#navigation, div#menu) { /* each selector within this block has its' own specificity plus the specificity of the block that it occurs in */ } The nav is the future HTML 5 <nav> element. Consider this. When we can use the <nav> element across many UA. It is only a type selector with a specificity of 0.0.1. Styling navigations usably involve selectors of greater specificity than normal page links. We may want to give this nav element some power. @specificity nav (100); Just some stuff to think about. Alan http://css-class.com/
Received on Thursday, 14 February 2008 16:49:15 UTC