Shiny new features

HTML & CSS
1

Maybe others here are more familiar with the newer features that we can use here and now - but reading through Dan Cederholm’s handcrafted css I realised i’m a bit behind.

Here’s a couple that I haven’t been taking advantage of:
Alpha transparency with rgba is an awesome time saver and more flexible way of specifying a color pallete.
rgba(0, 0, 0, 0.2)


a { color: rgb(1,2,3) }
a.lighten-up-a-bit {
  color: rgba(1,2,3,.8);
}

alpha transparency in png’s is pretty well supported out-of-the-box now. you only need to add a filter for ie6.


.png-are-go {
  background: url(omega.png);
}
* html .png-are-go {
  background: url(blank.gif);
  filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src='omega.png', sizingMethod='crop');
}

box-shadow:2px 2px 4px rgba(0, 0, 0, 0.1);


.shadow-boxer {
  -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#dddddd', Direction=120, Strength=2);
}

Sorry if everyone knows all this already - but I flicked through the pages last night and have already found really good places for all of these in todays styling so I thought i’d share. Does anyone else have things that they would add to the list?

border-radius is a little controversial for me as there’s just far too many IE users I want to see nice corners - i would actually prefer to add all the extra markup and images so they can see them. But there’s lots of polish we can add for browsers that support it.

I think I’ve been out of the trenches for too long…

2

A lot of CSS3 features can be used in Firefox and Safari now, but sadly not in IE at all. Many sites now have text shadows, rounded corners and the rest.

Here’s a slight variation on what you’ve posted above, for adding opacity to a background color, that’s found in the SitePoint reference:


.test{
  background: red;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  width:100%;                /* Required for IE filter */
  -moz-opacity: 0.6;         /* Mozilla extension */
  -khtml-opacity:0.6;        /* Konqueror extension (Safari 1.1)*/
  opacity: 0.6;              /* the correct CSS3 syntax */
}

The advice is not to use it in real life, though. That IE stuff is pretty darned ugly. I wouldn’t let it anywhere near a main style sheet, but I guess it could be added through conditional comments without too much fuss.

3

A lot of CSS3 features can be used in Firefox and Safari now, but sadly not in IE at all. Many sites now have text shadows, rounded corners and the rest.

text-shadow can be added with an ie filter also.

The advice is not to use it in real life, though. That IE stuff is pretty darned ugly. I wouldn’t let it anywhere near a main style sheet, but I guess it could be added through conditional comments without too much fuss.

Is that Paul and Tommy’s advice?
Personally I don’t have a problem with using filters where it can make life better for the users of IE. An example in Handcrafted CSS is using the AlphaImageLoader when wanting to scale graphics - It makes the image much crispy-er.

True, they are not standards - But i’m quite used to needing to hack IE.
You could argue that conditional comments don’t belong in html as they’re not a standard, that you shouldn’t use the meta tags for different IE modes. I’m not really that fussed.

Lots of people are advising to take advantage of new features to make things better for the users of those browsers that support it. The webkit transitions are an example of where you can add some nice animations between states.

The main argument is that websites don’t have to look exactly the same in every browser. But I’m finding that there’s a lot of stuff that does work perfectly fine in all the browsers worth mentioning with a few extra hooks.

4

Paul and Tommy are not Gods ;).
If you are going to use border-radius then you are accepting the fact that you will need a workaround for IE (and Opera) (if you are going to give them one)

5

How dare you talk about Paul and Tommy that way!

I agree on border-radius, which is why I might use it for subtle rounded borders but not for serious rounding :slight_smile: - it’s more the others things like opacity, shadow, png’s that I just didn’t touch because of IE’s lack of support.

In a sense embracing the browser deficiencies.

6

I believe it is; it was from the CSS Reference page quoted above.

Personally I don’t have a problem with using filters where it can make life better for the users of IE. An example in Handcrafted CSS is using the AlphaImageLoader when wanting to scale graphics - It makes the image much crispy-er.

Sure. I occasionally use these things, but I much prefer to put them in a conditional comment (as the lesser of evils, and to keep the main style sheet clean, which then gives it a chance of validating too).

I’m now starting to learn a bit of unobtrusive JavaScript, and starting to feel that this might be a better way to introduce presentational effects that CSS can’t fully handle.

Sacrilege! Thou shalt not speak of the great ones thus… :rofl:

7

Which means it is their advice

Sacrilege! Thou shalt not speak of the great ones thus… :rofl:
:rofl:

Ahahaha

I agree on border-radius, which is why I might use it for subtle rounded borders but not for serious rounding :slight_smile: - it’s more the others things like opacity, shadow, png’s that I just didn’t touch because of IE’s lack of support.

In a sense embracing the browser deficiencies.
Any sort of personalization to the rounding of hte borders will need to be done by images ofc. Border-radius only gives simple edges.

8

I enjoyed the book too, though while Firefox, Safari, Chrome and Opera support proprietary extensions using the “dash” prefix to give basic support until it’s adopted and finalized (the CSS3 spec), it’s definitely useful for the future. The one feature I desperately want is multiple backgrounds!!! Would save us plenty of extrenous HTML mark-up wrappers. Unfortunately though while IE still lags behind the others were going to be stuck making do with what we currently have :slight_smile:

9

It sounds like you actually want hsl() – not alpha transparency. (Keep in mind that alpha transparency is less performant to render compared to a solid color.)

10

You can combine it with border-style and box-shadow to get come pretty cool effects.

Here’s an example:
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/303

11

I agree. Tommy & Paul are great web developers dont doubt that one bit. Every developer has room to improve and learn more about the field. But saying they are Gods is kinda of bizarre get real! They didnt invent CSS.

12

Good point! You’re a very useful person to have around here :slight_smile:

It’s good to know about hsl, I can think of more uses for rgba because it allows the colours to blend. Even if it’s only for prototyping you can always change the colors to hex values when you’re happy with them.
http://yellowshoe.com.au/examples/rgba.html

13

I’ve erected a statue in their honour. The inventor of css was merely a man.

14

I think Paul is probably better than Håkon at CSS, actually (at least when it comes to doing the impossible in non-compliant browsers). :wink:

15

Think I need to get my hands on a copy of this Handcrafted CSS then…

16

To be fair we don’t seee Hakon that much and I personally feel that statement is biased since we have Paul around here.

Though I admit Paul can do some great things with CSS. I hope to be up there one day :-/

17

Yez, Comradez, you know you are beink spied upon, keep sayink good thinks about Dear Leaderz! : ) Those thinkink bad thinks about Leaderz, know you will be punished in night-time. And, more statues plz.

The one feature I desperately want is multiple backgrounds!!! Would save us plenty of extraneous HTML mark-up wrappers.

++ me too.

18

Lol @ that entire statement Stomme. I can’t describe what you sound like there without seeming mean :rofl:

19

<natasha>Sound like Former Soviet NoGoodNik, dear boy.</natasha>

Or mebbe you never saw teh Rocky en Bullwinkle show : )

20
Off Topic:

I loved watching that as a kid :frowning: lol