CSS3 rules used on a general basis

Jazajay

Active Member
On 1 of my current projects I thought why not see what CSS3, that I don't use on a regular basis, I can now use, for real, x-browser as Opera 10 is now out.

So I used the following and was TBH surprised to see how realistic it is to use more X-browser CSS3 than I do on a regular basis.

text-shadow,
border-radius,
font-face.

Now my question is, and this may be a topic Harry or anyone for that matter, can help me improving my skill set on, but what other CSS3 rules can be used EASILY, that being without loads of extra code to pull it off, x-browser? :love:
 
I'm pretty sure that part of the css3 specs called for them all to degrade gracefully, so in respect to the ones you listed, they'd go no shadow, squared and not sure what the last one is :)

And does this site help
 
Sorry Levi what I meant was are ppl using any CSS3 on a regular basis, if so how do they find them?
My fault should have been more clear. :)

I love that site by the way, plus css3.com of coarse.

Jaz
 
@font-face isn't CSS3. It works in IE6. I'll drop you a pm at some point jaz with some 'private' projects that use CSS3. I use it allll the time now, it really is great.
 
Okay instead of that Jaz I've made this: CSS Wizardry—CSS3 Examples which I will keep updating tonight.

There are three levels of enhancement:

1) IE6 — Nothing. But still presents all info perfectly
2) FF — Most. Transforms, shadows etc.
3) Sarafi — All. Gradients and animated transforms.

The key (for those not familiar with progressive enhancement) is that you build for the lowest (in this case IE). Everything looks perfect, works fine and is wholly accessible. Then you add layers to make what is good even better.
The old school of thought, graceful degradation, stated that you build for the best (in this case Safari) and take layers of compatibility off getting a slowly worse experience as you go down the browsers. The new and frankly amazing school of thought, progressive enhancement, states that you add the layers and get progressively better.
 
Yeah I know what they are I just couldn't really think of any good applications for them yet TBH as support isn't consistent enough.

I have to admit the nav, and the table hover is amazingly done there fella, I'll definitely take them on board so thanks for that. Especially the table that is just genius TBH as it seriously improves usability. I also like the roll over on the photos at the bottom, I remember site point doing that on their nav a while back but again just couldn't think of a good enough reason to use it yet, that has definitely won me round on that as well.

The box shadow I'm not convinced on TBH though as if I was going to do that I would want it to look right across browsers.

But do you position the table rows and photos at the bottom absolutely so they don't effect the others elements when you hover over them?
As I remember playing with transforms when they came out and that was the first thing I noticed.

How have you done the paragraph as well?
Again browser support would stop me from using it TBH, but I do like it.

Jaz :)
 
O when you update the list ping this thread so at least I can go check out a good example of it's use. ;)

Loving those examples so cheers.

Jaz
 
Ah I was explaining progressive enhancement etc for the non-web types so they can understand what we're geeking over haha.

Cheers, I think tables are a prime place to start introducing usability extras such as that.

Box shadow is okay, depending where you use it. If it's pivotal to the design then you'd need to use images really, but on smaller bits it's ace :)

And re positioning, the scale takes care of that so you don't need any absolute positioning. I applied position:relative; to the polaroids just to get the z-index working in Safari.

And yep the paragraph is CSS3. Browser support that isn't, in my opinion, an issue as it's purely stylistic and takes up pretty much the same space in non-supporting browsers anyway, so I can't see an issue there myself.

Cheers for the comments mate.
 
...for the non-web types so they can understand what we're geeking over haha.
O, O yeah I forget about them sometimes TBH I really do buddy. :D

So how do you pull off the paragraph then?

Z-index?
Now correct me if I'm wrong I thought that could only be used on elements positioned absolutely?
 
I've added some in-page code now bud so you can see what does that :)

And about z-index—it works on any element regardless of positioning. I rarely use it at all though.
 
Yeah the 1 I didn't know was column count so thanks for that, must have missed it, that'll teach me taking a few months off to learn about health and nutrition. :cry:
 
z-index works as long as an element has position. so position:relative; / position:absolute; etc.

Normally in my css reset I give pretty much all elements position:relative; - makes life much easier.
 
Well FF3 doesn't require a position to be set :S and while that may work on the whole in your reset it's still pretty risky. I remember when building the Rizla site the png fix we used applied position:relative; to everything—it was a total nightmare :(
 
What's risky about it Harry?

I've never had any problems, isn't position:relative; basically the natural way for elements to behave anyway?

Then you can easily position elements absolutely where needed further down your stylesheet
 
position:static; is the default positioning. Applying position:relative; unnecessarily can introduce odd behaviour further down the line. You should only specify styles if they're needed—it's the more sensible and bulletproof approach to coding.

I'm not saying it doesn't work, but it won't work 100% of the time and therefore shouldn't be relied upon.
 
Back
Top