Believe it or not there still a lot of discussion around CSS 3. The concerns among designers/developers vary widely and we’ve found that our visitors use CSS3.info in many different ways.
- General questions about your CSS 3,
- Research for future-proofing your projects,
- Browser support issues and updates,
- Tutorials and how to’s on CSS 3 features,
- Goings on in the CSS world
So there’s quite a range of information that we can get into and provide, but we would like some feedback from our readers so that we can continue to make the site a helpful resource.
If you’ve done extensive work with CSS3, feel free to let us know via the contact form and perhaps you can provide us with a tutorial or review that we can feature on the site!
Leave us a reply in the comments below and let us know what types of information you’d like to see us providing this year.
You can skip to the end and leave a response.
I use CSS3 extensively among a ton of other upcoming features in WebKit. We use WebKit in our upcoming video game for the UI so I don’t have to worry about cross browser issues and have been coding in pure CSS3 goodness for quite some time. Check out our site: http://www.wolfire.com/overgrowth
I’d love to write an article or something for you. :)
One of the greatest enjoyments I get out of using CSS3 is the simplification of existing techniques through new selectors. Be it alternating row colors or advanced behavioral rules, CSS3 lessens my overall code impact by orders of magnitude.
I would like to see more content on the new vs. the old, or “What CSS3 can do to clean up your act.” I’d possibly be willing to contribute an article from my own experience of pushing the boundaries with CSS3, as well.
For me who just recently started to look into CSS3 it would be nice with a list of features and indications of which browsers hava added support for it and which are yet to do so. It would give a nice overview and make it a bit easier to know when to start using the new features and in what regard.
Shameless plug, but it is true that I have extensively used CSS3, and written articles about it. My website is written in HTML5, with no divs, no classes and no IDs (aside bookmarks on headers). The CSS only really renders correctly on Acid 2 compliant browsers, therefore it uses a lot of CSS3.
This is a specific CSS3 article I’ve written: http://camendesign.com/code/uth2_css3-hyperlinks
Please keep demonstrating CSS3 support as it arrives! I would like very much to see examples of animation and transitions.
I’ve only recently started using border-radius (sometimes in combination with a js rounding technique), text-shadow and web fonts.
Although they are not part of the official CSS3 spec right now, I too would like to see more examples of the Webkit extensions: transforms, transitions, gradients, masks, … And I’d like to apply more of the exotic selectors in my own work too.
I think css3.info is doing a good job of keeping people up to speed (pun intended ;) about the progress in the field. Great resource!
I’ve used border-shadow so far only, but I’m planning on building a more css3-used site and I really can’t wait to use css3 selectors and multiple backgrounds – those two are going to clean my code to the bare bones. :)
I like this website and it’s a great source of both info & resources. Maybe I’d like to see more detailed tutorials on real projects, maybe all those people who comment here could create a beautiful and useful library.
I agree with those above that want more about what currently works in browsers. I’d like to be able to enhance my web sites for users whose browsers do support some elements of CSS3.
Yesterday I was wondering if there’s any support for ‘content:’ yet?
Think this site is awesome – I keep checking back.
There’s already really useful infos on your website, thanks a lot for that.
I would really enjoy seeing more about the actual CSS3 support and how to use CSS3 every day for cross browser website / apps (supporting FF2, FF3, Safari, Opera, IE6, IE7)
I know IE 6 will block on that, that’s especially why I would love to read about techniques, library,… to help using CSS3 on such platform.
Keep on rocking,
What I would like to wish for, is some specific update on the font module for CSS3. To be more precise, I am interested in the future of the font-smooth anti-aliasing feature. There has not been any update on the matter since 2007 here, and I am sure many are absolutely shaking of interest in anticipation of the prospect to be able to define anti-aliasing ;) .
I would love, LOVE, to have the ability to turn off ClearType and other font anti-aliasing that browsers use. 9 times out of 10 fonts end up looking horrid when they are anti-aliased, Verdana in IE is a good example, so is Arial @12px in most browsers.
That is all that would be needed, although you would need to make sure it only targeted ClearType etc and not the “normal” anti-aliasing that happens on text over a certain size.
Si Robertson: Why do you want to control the settings in MY system? I have enabled ClearType because I like it and I do not want you to disable it because you don’t like it. It does not matter if some font looks bad with it, it was MY decision to turn it on. It is not your decision to turn it off. Got it?
Clearype is the OS feature if I remember it correctly?
I think Si Robertson has misunderstood the function of font-smooth (as well as the scope and nature of CSS for that matter).
What font-smooth does, or is proposed to do, does not affect your system at all, rather, its implemented in the browser. As it is today, different browsers use anti-aliasing differently (that is independently of your system as such). Font-smooth is proposed as a way to give instructions to the browser as for how to render text, just like you give instructions for anything else in CSS.
On top of that, you can always keep your system preferences, such as ClearType, which is a different matter altogether from the functionality of font-smooth. Font-smooth gives the developer an ability to define the default/basic material that is rendered, any post-processing on that is up to the user and her/his system. Naturally I agree that the CSS shouldnt and cannot affect the system, that is well beyond the domain of the role of CSS.
The anti-aliasing issue is a mess today, because there is no way to define this as a developer vis-a-vis the browser. The problem is not in any way the different active preferences that users set, but rather that different browsers by default have very different ways of handling this.
Or Si Robertson maybe just didn’t consider that ClearType is part of the system :P .
In either case, furthermore, Id like to add that for me the main use for font-smooth is not to change the anti-aliasing for whole websites neccessarely, but it is easy to see the use of it for certain elements, such as navigation bars etc.
I understand that ClearType is part of the system but theoretically it would be possible for a browser to enable/disable ClearType while parsing a CSS file in the same way some browsers allow CSS to dictate scrollbar styles.
This was just a suggestion though and it will probably never happen. The thing is, fonts are an integral part of design and if a designer decides that certain blocks of text should use an aliased font then CSS (and the browser) should ideally allow that to happen. There is no reason why a site couldn’t provide additional CSS options for those strange people who sound as though they will die if ClearType isn’t enabled at all times.
I just hate when people think they can control the settings of my computer from their websites. Change even ONE setting and I will absolutely never ever visit your site again. In fact, I will submit said site into all known phishing/malware databases so browsers will give you warning if users go to that site. Because in my book, attempting to change system settings is *always* a malicious attempt, no matter how good the purpose might be.
Great, soon we need extension to prevent CSS from disabling font antialiasing…
I think you’re taking things a bit too far here. Do you submit every site that changes the browser’s scrollbar style to phishing/malware database?
I’m not suggesting that CSS has the power to disable ClearType throughout an operating system, or even disable ClearType at all really. Some fonts and font sizes should be aliased because (a) they are extremely hard on the eyes when aliased, and (b) they are designed to be aliased. Arial at 12px and lower should be aliased, Courier New and all of the other mono-fonts should be aliased. This isn’t about taking control of your system, this is about fixing what ClearType is currently screwing up in regards to font rendering.
You know what I hate? People who can’t discuss something like this without acting like a four-year-old throwing a hissy-fit.
Of all the new great things CSS3 is capable of — I’m sure there’re plenty ones –, I would like to ask you guys if it’s able to angle a div or a block of text. Not to metion images, links and anything else. But it’ll be a good start, though.
I’m asking because it’s such a very-simple-yet-helpful feature to be added, eliminating the sometimes unecessary use of images just to tilt or twist a title or a paragraph.
The consequences I imagine are lighter and clearer HTML files — No need to use images.
Better semantics and browser-reading content.
And so on. I’m pretty sure would as practical as embedding Truetype fonts in CSS and it would require only a “angle” attribute to be added.
You can rotate stuff with the CSS Transforms stuff Safari and Firefox (3.1) support, although on Windows at least it gives you a widely inconsistent text baseline (at least in Firefox, but I assume that’s a Windows thing since it doesn’t happen to the same extent on OS X).
Also (off topic a bit), as of the latest Firefox nightly, it supports CSS3 multiple-backgrounds.
Si Robertson: sorry for late reply but this site’s been acting up for days now. You are right, I hate to discuss with someone who acts like four-year old but you simply do not seem to get my point:
MY machine. MY settings. You will not change ANY of them. Ever. I don’t care if some fonts look like crap if antialiased. The decision to antialiase all fonts is mine, not yours. I don’t care what you think about antialiasing. It is my machine and my settings. Got it?
And my browser does not change the scrollbar colors.
Have you guys seen text rotated 15 degrees (or whatever) using ClearType? It looks just plain ugly. It’s like the text tries to stay horizontal but at the same time tries to be rotated. And the readability is completely gone.
ClearType by nature is not designed for text that is not horizontal, as ClearType’s main purpose is to alter the font so that it fits the pixels on the physical screen. At least it doesn’t seem to be able to adjust for text on a angle.
The way I see it, the only way to get decent looking text when it’s rotated is to some how disable ClearType and render it with normal antialising. Mac’s don’t have this problem because Mac OS’s font renderer doesn’t try to screw with the fonts.
Try this on some element containing some text:
Compare in Safari for Mac and Safari 4 on Windows with Font Smoothing set to Windows Standard.
Or for Firefox 3.1b2:
Compare the same on Firefox for Mac and for Windows.
The difference is huge. ClearType just screws it up and makes it unusable (it just looks too weird).
Also, if you add some color change to the element for hover, ClearType will actually start moving the individual characters of the text like it’s not sure where to render the text between the hover states. Put that on a web page and people will for sure think something is wrong with the page.
It drives me crazy, especially because I just made some admin menus that uses this. It looks really nice AND is actually very functional because I needed the menu to kind of move away a little from what was under it. Then I discover ClearType…. and then that Safari 4 Beta has turned ClearType on by default on Windows… What a waste.
Back to the old, or back to image-text… (which we all love, of course).
This is kind of random, but it came up the other day while working on a project… As I understand it the standard way of putting one object in front of the other is the z-index. I think it would be cool too see a fore-ground property in CSS3 Making it easy to layer items within one element.
I played with CSS3 with this particular post: http://libregame.gameshogun.ws/8gametitles/secret-maryo-chronicles
Because I was curious as to which features are currently supported by each browsers.
My recent checking today, Safari 4 Beta and FireFox 3.1 Beta 2 are at par with each other at least from my own test page. While Opera 10 is almost there.
I do not know about IE8, I’m still going to download it. Currently, I’m planning on creating a new (personal) test page, combining HTML5 and CSS Level 3. (Anyone who have an existing one online?)
@People arguing about CLearType:
ClearType can easily be controlled locally, so it could easily be implemented as a CSS property, and it could follow the same rules of inheritance as everything else.
It is not necessarily a system-wide property.
Currently, it really does often make a lot of sense to disable it, since it does do weird stuff. It might also be a good idea to implement a more accurate antialiasing scheme like Apple’s AA. On the other hand, Direct Write (In Windows 7) is a pretty good solution, so it may become a non-issue.
But on topic, I’d like to see more on the Webkit extensions, especially now that they are being added to the official specs!