Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    one css stylesheet

    Hi

    I was wondering if someone could point me in the direction of how to use one css stylesheet for all browsers and screen sizes

    I have tried all sorts and ended up with around 6 stylesheets, one for each browser and screen size

    Am fed up of it

    Must be a way of using stylesheet for all browsers and screen sizes

    Please help

    Kind regards

    Ian

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    What? With six stylesheets you’re not nearly addressing each browser and screen size, if you wanted to do that you would have to write a million stylesheets.

    But anyway, it’s not at all hard to have one stylesheet for all possible use cases but the key to this is to write clean, valid, and semantic HTML. If the HTML is good then chances are good that it looks the same in any browser if you apply CSS.

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Stephan is right. If you limit your html to only include objects, and rely on css to determine the entire look you shouldn't have a problem. Try to stay away tables, and from using html to determine how something looks.

    There might be a rare case where maybe you need to hardcode an image directly into the html, but it can almost always be avoided.
    Thanks!

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by stevenmw View Post
    There might be a rare case where maybe you need to hardcode an image directly into the html, but it can almost always be avoided.
    Images should be hard coded in the HTML when they are a part of the content.

    It is images that are only there to be a part of the appearance of the page that go in the CSS.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by felgall View Post
    Images should be hard coded in the HTML when they are a part of the content.

    It is images that are only there to be a part of the appearance of the page that go in the CSS.
    That is basically what I was saying. Should have worded it better. When I said almost always be avoided I meant when affecting the way something looks.
    Thanks!

  • #6
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    After you've taken the above posts into consideration, I'd say the next step would be to learn to create dynamic layouts, and to avoid (or learn to properly create fall-backs for) unsupported and browser-specific styling. Much cross-browser incompatibility is caused by preset CSS styles made by each browser to their own preferences as a sort of default. Learning to override such styles is a big part of creating code that works the same in all browsers.

  • #7
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I didn't even think to mention that, Custard. That's a good point. Look into css reset. Just Google 'css reset' and all kinds of great stuff will come up.

    Look into html 5 page structure too.
    Thanks!

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    “CSS reset” is no good. Much better is normalize.

  • #9
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by VIPStephan View Post
    “CSS reset” is no good. Much better is normalize.
    Do you agree with having css resets set as a type of fall back in your stylesheets just in case? Or do you fnd it bad practice all together?
    Thanks!

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    The problem with these default CSS resets that you find on the web is that they reset everything, even those styles you actually don’t want to have reset, like bold for <strong> elements or headlines, or superscript and subscript for <sup> and <sub> elements, respectively. Also, these styles usually clutter up the debugging panels (e. g. Firebug). Normalize actually makes the default styles you expect equal across browsers so you have a standard to work off of. The overall goal is basically the same as reset, just without the reset.

  • #11
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    So do you never use any type of css reset other than what is included in the normalize css? I generally pick and choose what I need reset, and tailor things. (I use box sizing in certain things and don't see the need to apply it over and over so I may apply it to all html 5 containers at once along with div.) Do you not feel there are any good aspects of reset? i mean do you feel it can be tailored to have a useful outcome?

    I'm not arguing I am genuinely curious at someone Else's perspective. I absolutely think normalize is great, and it does solve several issues. I just find myself using pieces of css reset at times. As far as clutter, someone could have a separate stylesheet just for their resets / normalize css to help save space in things like Firebug.
    Thanks!

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Well, yes, I do reset some things sometimes as the project requires. Over the years I have created a default stylesheet with all the styles that I usually apply anyway, so as to not retype it everytime again. This includes removing borders around fieldsets and images, removing default margin and padding from the body, etc. But I never do something like * {margin: 0; padding: 0;} because sometimes the default styles don’t hurt, and if I need specific margin and/or padding I’m writing it out anyway so that would just be twice the work, resetting and then re-adding it.

    After all, if you have gathered some experience then you usually know where default styles might need to be changed to look the same in every browser. And if you add box-sizing to some elements you are actually not resetting anything, you are actively adding styles that you need because they might be useful to you.

  • #13
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by VIPStephan View Post
    And if you add box-sizing to some elements you are actually not resetting anything, you are actively adding styles that you need because they might be useful to you.
    Yes but essentially css resets and normalize do the same thing. Each of these have some place where they are actively adding a style to something. Despite the fact that we call them resets some things are added just to make things uniform. Normalize and resets have at least one place where they activey apply a style to something that isn't a default but instead something to make things act the same across the board.
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •