Join 306,969 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,834 people online right now. Registration is fast and FREE... Join Now!
I have begun writing articles for smashingmagazine.com and I realized that I constantly see people annoyed with this or that (on DIC) about how CSS's methodology (lack of story control, ease of float manipulation, color library in code, etc) is accomplished, so I thought - why not write an article on the top 5 desires from the coders. Since I love DIC I thought it would get DIC a decent plug but also be a good shout out to the W3C on what real developers desire from their programming languages.
No desire is too big or too small, be please be aware that the most concise will be chosen to be in the article.
Disclaimer: Also understand that by posting it here you are giving me permission to use your update to CSS in my article ( I will put your screen name as a citation though)
Perhaps there already are such functionality in CSS but I would like a way to reference another element, say you have an element that expands dynamically depending on it's content, and another element that are completely separated from the first one but you want it to be sized and aligned with it:
CODE
#myFirstElement as $mfe { width: auto; }
#mySecondElement { width: $mfe.width; }
Something like that, which should state that the width of #mySecondElement always should be the same as the width of #myFirstElement. Is this a stupid idea? haha
I would also love to have a rounded-border ability, like so:
CODE
.roundedRect{ rounded-border-top-left: 5px 1px black solid; border: 1px black solid; }
Where the parameters go like so:
QUOTE
radius border-width border-color border-style
Then you would obviously be allowed to modify all four corners with that type of thing.
I would also love to see background gradients allowed in browsers other than IE. It could be like so:
CODE
background: gradient(#f00 #0f0);
And maybe it could give you ability to set how far the gradient should go (in pixels or whatever) and they style of gradient (radial, linear, box, etc.).
For the moment that is all I can remember wishing CSS had.
So if you have a block of text that fills a certain column it then flows to the next and so on, so it reads just like a newspaper. Could be interesting.
Color Swatches
I can't tell you how many times I have to jump back into PS to eyedrop a color. I think it would be great to be able to do the following:
So then when you say background: red; it references your swatches if they are there. The '@' signs are there to keep in line with their @media and so on.
The color-swatch idea is really great, would be awesome for creating templates! I would really appreciate such functionality! But I would prefer to use the @-syntax when giving a selector the value as well, in order to not disturb with the standard values for different colors (red, green, yellow, blue, etc.). If that's not want you want of course?
About the "story mode", don't they have something similar already in CSS 3? http://www.css3.info/preview/multi-column-layout/, it would be really awesome though, especially if it could take effect on tables and such as well!
I think that this thread has been great. Good work boys down at the W3C!!
One benefit though that I see in the way that I did it is you could have that next paragraph anywhere, not necessarily right next to each other. You could have the story jump diagonally if you wanted to.
This post has been edited by gregwhitworth: 28 Jul, 2009 - 10:32 AM
One benefit though that I see in the way that I did it is you could have that next paragraph anywhere, not necessarily right next to each other. You could have the story jump diagonally if you wanted to.
Yeah! That would be a beautiful way of doing it actually!
I would like to have a way of placing elements in a rotated manner using CSS, to avoid having to use JavaScript or images for doing such business:
CODE
#myElement { rotation: 45; /* Value is in degrees */ }
I think that would be awesome!
EDIT: Obviously the rotate-functionality is also a part of the CSS 3 specification, but not as I wanted it, but almost:CSS 2D Transforms Module Level 3
I really have to spend more time reading through these specifications!
This post has been edited by Wimpy: 28 Jul, 2009 - 12:16 PM
One benefit though that I see in the way that I did it is you could have that next paragraph anywhere, not necessarily right next to each other. You could have the story jump diagonally if you wanted to.
Yeah! That would be a beautiful way of doing it actually!
I would like to have a way of placing elements in a rotated manner using CSS, to avoid having to use JavaScript or images for doing such business:
CODE
#myElement { rotation: 45; /* Value is in degrees */ }
Some moderator or something / someone should, I think, pin this topic since it is very interesting and shouldn't be allowed to be lost among all the others, never to be found again!
Another thing I would really like to see is some way to allow for ease of incorporation into browsers. This one is a little out of my league, but when 1 browser doesn't move forward with integrating the latest technologies this stifles creation and ingenuity.
So if there was a way to have a third party basically hand over a set of objects to the various browsers we then would get the latest and greatest across the board. It could be something of a jquery for CSS allowing the browser developers to work on GUI and other things that are un-CSS related.
JQuery has the advantage of being JavaScript doing JavaScript, which is impossible, as of now, with CSS. This mean you would have to create an "entirely new" language or something like that (or on the other hand, you should be able to use CSS), which would be parsed by some application into cross-browser-compliant CSS-code. It would be awesome but how possible is it?
To do it, it would require a thorough list of CSS bug-fixes, hacks and workarounds and a great understanding of how everything relates to one and other!
EDIT: I have to admit that I'm not completely sure of what you meant! I might have misunderstood you completely!
This post has been edited by Wimpy: 28 Jul, 2009 - 11:32 PM
I think you did. I am talking about how currently that 'story mode' that you showed me in the above posts is only supported by FF and Safari currently. So, what I suggest is having some object or class (in C++ or C# depending on the browser's flavor) for all browsers to merely download and compile with their browsers.
Then they can focus their efforts elsewhere: speed, gui, other technological advancements - while this third party group maintains standards in compliance with the W3C. So then there would be no browser differences in rendering, merely the technologies of the browser.
As, users should always in the end get the same result, PERIOD.
OK, I think I know where you are getting at now! You mean that the browsers shouldn't have their own built-in CSS support but merely use a third-party system for CSS-rendering which would make everything cross-browser!
I think, though, that it would take more time to develop such a plug-in and get all browsers to use / support it than it will take for browsers to render CSS consistently!
I saw that the CSS 3 specification had support for functions and namespaces and such, I am really, really looking forward to it's release and when all browsers support in about 5-10 years! hehe
It may take time in the long run. But just think of JQuery and it's capabilities, you download and install, they keep all functions and classes the same and then you add functionality of new classes that you can render. Like I said, this is coming from a web only programmer, so I am not sure on the logistics but I think in the end it would be worth the wait. Shoot, you're talking about hopefully having support for CSS3 in 5 - 10 years.
I'd also like to see the ability to force text hyphenation
That's a good one, but the mix seems like a min max kind of a thing. So you would be saying a minimum of 10px to 50% of the screen which could be done like:
CODE
min-width: 10px; max-width: 50%;
It isn't fully supported in all IE versions though.