Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS3 rules used on a general basis

Discussion in 'Website Design Forum:' started by Jazajay, Nov 14, 2009.

  1. Jazajay

    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.


    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:
  2. Levi

    Levi Moderator Staff Member

    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
  3. Jazajay

    Jazajay Active Member

    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 of coarse.

  4. glenwheeler

    glenwheeler Senior Member

    I need to start looking at this, i really do. I have dipped into it and it seems very powerful.
  5. Harry

    Harry Senior Member

    @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.
  6. Harry

    Harry Senior Member

    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.
  7. Jazajay

    Jazajay Active Member

    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 :)
  8. Jazajay

    Jazajay Active Member

    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.

  9. Harry

    Harry Senior Member

    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.
  10. Jazajay

    Jazajay Active Member

    O, O yeah I forget about them sometimes TBH I really do buddy. :D

    So how do you pull off the paragraph then?

    Now correct me if I'm wrong I thought that could only be used on elements positioned absolutely?
  11. Harry

    Harry Senior Member

    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.
  12. Jazajay

    Jazajay Active Member

    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:
  13. tbwcf

    tbwcf Active Member

    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.
  14. Harry

    Harry Senior Member

    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 :(
  15. tbwcf

    tbwcf Active Member

    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
  16. Harry

    Harry Senior Member

    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.

Share This Page