CSS calc()!

[raestlyn]

This article describes the CSS3 calc() value. This feature hasn’t landed yet in any Firefox tree but work to implement it is underway.

Firefox will support the CSS calc() value, which lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth.

Read here!

I personally think this is great, as we can now make truly fluid layouts for those who are javascript-handicapped.

[Nox]

Cool
In like 50 years CSS could actually become a reasonable language and we won't need projects like LESS CSS etc.

I just read HTML5 is to be finished in 2022 ... I don't know... everything in IT developes so fast but web progress seems so rigid to me

[raestlyn]

I don't know, you already have CSS3 transitions (animations!), great pseudoclasses like :hover, :active and :target. You can actually skip some of the JS DOM goodness and write less code with these.

HTML5 is more hype than Ajax was. There is so much new (and useless IMHO) stuff in it so it will take some time before Exploder and other non-Moz, non-Webkit browsers can support them.

[Nox]

HTML5 was just an example

I didn't mean what you can achieve with CSS but rather how
Even with inheritance CSS has rather poor DRY (unless you have tons of classes for every other element), no variables, without calc() no operations etc.
So sure, I'm for every progress

[Marek]

Cool
In like 50 years CSS could actually become a reasonable language and we won't need projects like LESS CSS etc.

I just read HTML5 is to be finished in 2022 ... I don't know... everything in IT developes so fast but web progress seems so rigid to me

The thing about web standards is that there is one web for everyone. So defining a standard is not an easy thing.

In other areas of IT, you see proprietary standards and protocols that can be changed relatively easily and quickly. In those systems, there is usually one authority (the owner of the proprietary standard) and they can make changes that everyone follows. An example is Flash and ActionScript: Adobe is the owner and they can make upgrades anytime they want, and all they have to do is release a new version of their software. If anyone else is using the Flash format, they have to adapt or fall behind.

On the web, neither the publishers nor the browser makers have any authority. So, neither side can make any changes to the standard if the other side doesn't adopt those changes as well. What takes time is the wait for both content providers and browser makers to adopt the new standards.

So it's not a question of when HTML5 will be finished, it's a question of when the various parties will choose to implement the new features, and when the users will choose to upgrade their browsers.

A large part of CSS3 and HTML5 is already supported in the latest versions of Firefox and Webkit.

[Barrikor]

/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

The simple expression language of the 'calc()'  function supports five arithmetic operators (+ and - have lowest precedence, *, /, and 'mod' have highest precedence) and parentheses. At a later date new operators such as min/max, conditionals, etc, and maybe new constants may be added.

...

Note that 'mod' is used instead of '%' for modulus since it is very easy to get confused about whether '%' is acting as a unit or an operator. At least with 'mod' it always causes a parse error — invalid unit — in the otherwise ambiguous cases.

Awesome

We've needed this for a long time Hopefully the other modern browsers pick it up quick

[JGadrow]

We also need a unit that corresponds to the height / width of the selected element. It would be nice to build a CSS sheet that says:

Code: (css) [Select]

div
{
    width: 50%;
    height: calc(3 * ew / 4);
}
This would create a div that takes up half of the available width of its parent element and its height would be equal to 3/4 of that width. This would allow for designers to actually create layouts that are proportional in design.

[Barrikor]

Since we're taking theoreticals here, imagine if you could grab values from other elements (without using javascript)...

Code: [Select]

/*just pretend*/
#redBox{height:50%; width:calc(#blueBox.width - 2em);
Wouldn't that be the day...

[JGadrow]

That would be nice, but I know it's their goal to NOT make it a programming language with variables and things of that nature.

And I realized that I made a mistake in my previous code from what my actual intent is:

Code: (css) [Select]

div
{
    width = 100%;
    height = 0.75ew;
}
This code could also render an element that was 3/4 as tall as it was wide similar to how the em unit works.

[Harkins]

Since we're taking theoreticals here, imagine if you could grab values from other elements (without using javascript)...

You can get this sort of thing from Sass already.

[JGadrow]

Pretty cool. So, they've created a proprietary scripting language that translates into CSS declarations.

Might be pretty useful, especially for enterprise-class deployments.

[Barrikor]

Looks like it's under the MIT License.

While I'll be sticking to pure CSS, I still found that quite interesting, they've obviously put a lot of thought into how it works...

[dsheroh]

I personally think this is great, as we can now make truly fluid layouts for those who are javascript-handicapped.

Erm...  I don't know about you, but I'm not really expecting to see any browsers released which support CSS3, but not Javascript.  (Are there any now that support CSS (any version), but not js?)

[JGadrow]

Erm...  I don't know about you, but I'm not really expecting to see any browsers released which support CSS3, but not Javascript.  (Are there any now that support CSS (any version), but not js?)

I think the intent there was that the user was JavaScript handicapped not the browser itself. I think that it was also meant that the user was poor at writing JavaScript, though I can see it equally applicable for users who browse with JavaScript turned off or who have a plug-in such as NoScript.

Anything that lets you do the same thing with less JavaScript is good in my book.

[dsheroh]

Anything that lets you do the same thing with less JavaScript is good in my book.

Agreed.  As a big fan of NoScript, I don't consider myself "javascript handicapped" so much as "javascript unencumbered".