http://www.w3.org/TR/css3-roadmap/
Hasn't CSS3 been out since a while now? Why is most of the specification not complete?
Is there a complete reference anywhere on the web (or in a book)?
CSS 2.1 was finalized only a couple of years ago. As Hogan said, this could take 10 years. CSS3 was introduced just a few years ago itself. Standards are based on implementation, not invention.
This work takes time, a lot to be done.
Check "CSS3 for Web Designers"
http://books.alistapart.com/products/css3-for-web-designers
Wikipedia has a nicely compiled list of CSS3 specs.
Does this link help: http://www.w3.org/TR/#tr_CSS
Standards are a slow process -- you can see newer stuff in that list. A book is probably your best bet to see a "distilled" version.
This is a presentation I wrote showing the state of the union in HTML5 (and satellite specs) and CSS3. The CSS3 section is in the middle.
CSS3 basics are there, but there are many advanced features that have not been implemented yet, and IE is particularly laggard.
Yes, this is correct CSS3 has advanced features it is not been in use as much it has o be i would like to enhance the face the web by utilising those features of CSS3
The problem is it's hard to find an authoritative single source of documentation for CSS3. CSS2.1 spec was easy to find. It was one monolithic easy to read spec even when it was a draft. However:
for CSS beyond Level 2, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable chunks and allows more immediate, incremental improvement to CSS.
That does not mean there can't be a monolithic view of the modules and how they fit together. I don't think they really value that in the CSS3 WG right now for some reason. This has been asked on the CSS3 mailing list last year, this the reply:
... years ago, there was probably still some feeling that we
would produce an omnibus CSS3 spec similar to the 2.1 spec, but that
feeling died a long time ago. (If we ever do produce such a thing,
it'll be automated.)
You can see all of our specs at http://dev.w3.org/csswg/, though,
which is similar to having an omnibus document with a
not-very-useful title page!
They also do these snapshots summaries of all CSS work to date, which aren't very useful or readable.
Related
In CSS Text Decoration Module Level 3, there’s text-decoration-skip. It does magic like this:
This representation is allegedly produced by using text-decoration-skip: ink;. For web typography, it’d be great if descenders are no longer struck through by native underlining.
There’s an entry at CSS-Tricks and more recently also one on MDN. There, it says it’s “not on a standards track”. Is that right? The property is listed in the W3C Candidate Recommendation.
How can I use text-decoration-skip? Or when? Are there flags to enable it?
As someone said in the comments to the question, there's no saying when and how it will be implemented.
For reference anmd clarification, the origin article of the picture you posted isn't what the actual spec necessarily will look like, but a draft of what Marcin Wichary had in mind when tinkering with it. So don't make the mistake and consider that image a reference for the CSS3 output, as it may look entirely different when finally implemented.
I also can't tell you why MDN doesn't list it as a feature necessarily to be implemented, whether it's a decision of the development team not to implement it, or they just missed it. I can, however, tell you that they are correct in saying "This property has not yet been implemented in any modern browser."
As for browser support, take note of this comment in the CSS-Tricks article, linking to the folliowing image:
It's not only interesting because that's quite a dated browser (which of course didn't do this because of some CSS3 spec, but likely because they had the same basic idea), but also because that's likely what the property will look like when finally implemented.
While text-decoration-skip seems to have been “deferred to Level 4 to allow for major changes”, Chrome 64 (2018-01) and Firefox 70 (2019-10) implemented a close relative (applied by default), because “most other browsers are converging on supporting the simpler text-decoration-skip-ink property”, and it certainly does work:
u{font-size:444%;}
u:first-of-type{ text-decoration-skip-ink: none; }
u:last-of-type{ text-decoration-skip-ink: auto; }
<u>parapsychologists</u>
<br>
<u>parapsychologists</u>
Note that there’s even more cutting-edge text-decoration stuff, like text-underline-offset or text-decoration-thickness.
I started a new web project today, and having never used CSS3 (always used CSS 2, but have not done web development for 1.5 years) I decided to use it for this project.
Straight off the bat I had issues. I tried to implement a linear gradient, and seen it needs 6 implementations for different browsers - including latest browsers.
Is it too early to start using CSS3 projects, it just seems like so much code bloat.
Sure, you just have to make a decision if you want your page to look the exact same in every browser (hint: you don't). You can check support of CSS3 features here: http://html5please.com/.
You could also try to use SASS or LESS and functions to abstract away the double / triple / sextuple implementations for you.
CSS style sheets have a habit of growing big and chaotic over time.
There are a lot of rules, hints, and schools of thought that help achieving cleaner CSS. (For example here) However, all those require constant alertness, activity and a lot of discipline on the maintainer's end, with mixed real-world success. As Nicole Sullivan so nicely puts it:
In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopular though it might be), that we couldn’t make it work out well by trying harder. Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.
Are there any efforts to create a language of some sort, with strict structural rules and a merciless compiler, that enforces strict rules that prevent style sheets from becoming spaghetti? The compiled end result would be CSS.
I have no idea what such a language would look like and whether, given the vast amount of possibilities and combinations, this is a solvable problem at all.
Is there any research in this field? Anything to try out?
One very interesting related tool is CSS Lint, but what I'm asking about goes even farther than that.
Edit: LESS and SASS absolutely go into the right direction, but they are not what I am looking for. They introduce some very nice features and are a godsend for the CSS developer, but what I'm, asking about goes even further and more into defined, enforced structures.
You could very easily write spaghetti code in any interpreted language, so really what you are looking for is a CSS compiler. This is sort of what Google GWT does for JavaScript by generating it from Java code.
However, CSS doesn't have flow control, functions, variables etcetera, which means it doesn't make sense to have a higher-level language around CSS. At the root of it, it's just name-value pairs with cascading logic.
If you want to reign in your CSS code, you need to reign in your DOM as well. If you are defining columns with IDs left and right then you are semantically restricting the designer from moving them anywhere else. On the flip side, if you are smart about things you can do a lot more.
Lastly, the cascading part is what most new designers have the highest tendency to get wrong. If you pay close attention to the DOM and cascading logic, make use some good resets or grid-based frameworks and incorporate tools like LESS (Ruby) or LessPHP, you'll end up CSS that's far more pleasing to work with. I like LESS because It empowers you with quasi-functions, variables and nested properties which really helps clean up your CSS.
Are there any efforts to create a language of some sort ... The compiled end result would be CSS.
There are two efforts that I know of to do exactly this:
Less
SASS
Both aim to provide an improved version of CSS which allows you to write with more structure.
In addition, Google have demonstrated a development version of Chrome which incorporates a number of additions to CSS along similar lines. This is interesting because it indicates the future direction of CSS, but in the short to medium term you will need to use Less or Sass, as even the work in Chrome is very much experimental and will not be released for some time to come (and even when it is, you'll need to wait for the other browsers to follow suit).
[EDIT] Here's a link which details Google's experimental CSS features in Chrome: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/
[UPDATE 18 April 2012] There has been some progress in this area since I wrote this answer. Slow progress, but progress nonetheless. The good news is that CSS Variables has just been published as a First Draft specification by the W3C.
See http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html for the official announcement of the specification.
So that's goodnews. Of course, how long it takes to get into the browsers and the end user base is anyone's guess, but at least there are signs of progress.
There is Stylus, something like LESS and SASS, but with transparent mixins.
That means that you can hide away complexity by bundling it into new key/value pairs. Example from the site:
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
form input
padding 5px
border 1px solid
border-radius 5px
Maybe this kind of syntax is what you want?
PS: you can still type braces and semicolons, if you prefer ;)
Well you seem to know about Nicole Sullivan, so if you know about OOCSS already, I apologize, but no one seems to have brought it up. If you don't, it's her own project to do this very thing, I believe. It's only in Alpha testing right now, but you asked about efforts and not finished languages, so maybe this will be just what you're looking for. It definitely claims to be be for solving the problems you describe, but I haven't used it myself.
https://github.com/stubbornella/oocss/wiki
Have you checked out Compass? Compass is a framework built around Sass. I think it mostly adds features and boilerplate code to add a library of predefined mixins and whatnot. However, Compass might be even closer to what you want. Compass is based around Blueprint which is a straight up CSS framework (which may also be worth looking in to).
To me the best approach would be to take Compass and Sass (or CSS and Blueprint/LESS and something comparable) and to write a very concise and detailed style guidelines which you could develop overtime as you figure out what works best: your first thoughts on the matter, regardless of experience, may be wrong. Once you have these guidelines down you could talk to the people at Sass, Compass, LESS, Blueprint, whatever, about working in some of your well thought out and "researched" guidelines. OR you could start contributing to these wonderful projects which I believe are all under an open source license (Sass is under MIT, LESS is under Apache and I think Compass and Blueprint also under some form of open source license). Fork it and have fun :D
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
What is the best CSS Framework and are they worth the effort?
Would you recommend using a CSS framework for ASP.NET like the Blueprint CSS Framework vs building your own css styles? What are the benefits of using such a framework?
Abstraction is the keyword.
Like every framework it delivers you a code basis you can build on. You don't have to "reinvent the wheel".
Ever considered using CSS resets? They're much simpler and allow you to start from the ground up.
I have heard of CSS frameworks but don't really understand the level of complexity they introduce.
That said, I do tend to write standard CSS and expect browsers to conform to it. If not perfectly, then similarly across them all.
I think the benefits are:
1.Easier to follow web standards.
2.You code will be consistent across the projects, and for that reason much easier for maintenance.
And definatelly give a look to reset and fonts-reset
I don't see why using CSS Frameworks.
I always do my CSS from scratch, sometimes to remember sometimes i go back to my older CSS styles and look around. And sometimes i just do some testing until I've obtained what i wanted.
EDIT: Just read some of the web standards guidelines and do some experiment and you will get the hand of it..
I did the same and at my first times.. I had some cross-browser issues and other small stuff.
now i'm pretty happy to say that i do cross-browser css, with no big problem.
But if you just need CSS for a project, and you wont be needing CSS again, using a Framework might not be a bad idea.
In my opinion a CSS framework:
PROS
Aims at cutting down development
time.
Standardization and consistency.
Solid foundation to build upon.
Guidance\guidelines to follow. Avoid white screen of death effect.
Proven "good looking" UI.
CONS
Extra complexity
Steep learning curve
...
PROS: Anyone can take it and produce a result
CONS: Not everybody will be able to fix what comes out of it...
I would defenitely use a CSS framework, simply because you can assume it has been tested in a lot of browsers. I you use something like 960.gs and it looks correct in one browser, you can be quite sure it will do so in all the others.
And like Omega notes I would at least use a CSS reset file, like YUI Reset CSS.
I like to use CSS frameworks because it ensures that it looks (quite) the same in many different browsers. e.g. I'm sick of writing hacks for internet explorer 6. The framework take this part for me.
The con is that you have to learn how to use the framework of your choise, but once learned it makes fun to write new sites.
I'm using YAML btw.
I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?
You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.
Also, you might want to look at Yahoo's CSS reset
An aside to clarify a point:
... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....
Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.
Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).
To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).
The way I work is:
Use a css reset
Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
Patch things up for IE using conditional comments (because you'll probably need things that don't validate)
A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/
Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?
Eventually, you might need to compromise, but you can cross that road when you get there.
Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.
CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.
You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.