SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is a closing semicolon required in css and other question

    Hi all
    Is a semicolon required at the end of a css statement? It works fine and doesn't throw an html error:
    .nav li li {background: #e4e4e4}

    Can I get rid of all spaces within { } brackets? Thank you

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    A trailing semi-colon is not needed on the last rule.

    e.g.
    Code:
    .test{
    background:red;
    color:blue
    }
    However, personally I only ever omit the semi colon when I use a single rule.

    e.g.
    Code:
    .test{background:red}
    On multiple property/values I like to leave the semi-colons in place.

    Can I get rid of all spaces within { } brackets? Thank you
    It depends where you mean? You onviouslay can#'t remove the spces between values.

    e.g.
    .test{margin:0000}

    It needs to be:
    .test{margin:0 0 0 0}

    But there doesn't need to be a space between the opening bracket and the first property and the closing bracket and the last value.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    In that case it's legal since you only have one declaration not multiple: http://www.w3.org/TR/CSS2/syndata.html#declaration
    Last edited by xhtmlcoder; Oct 14, 2011 at 14:11. Reason: Paul is a CSS Whippet and bet me while editing.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul and Rob. Rob that link you kindly sent seems to show that it isn't required as Paul says (it has both examples). Cheers

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul explained this very good. I myself do not use semicolons where it is not necessary and I remove all the unnecessary spaces. I use one line for each element like the sample code below:

    HTML Code:
    body{margin:0;background:#d5dade;font-family:verdana}
    body a{color:#0080b0;text-decoration:none}
    h1{margin:6px 0;font-size:1.25em}
    h1 a:hover{color:#439fc2}
    h2{margin:8px 0;font-size:1.1em}
    h2 a:hover{color:#439fc2}
    img{border-style:none}
    table{margin:0 15px;font-size:0.8em}
    table td{padding:5px}
    I know it makes it a bit less readable (not with custom styled Notepad++ though) but I do work like this faster and I am used to it.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Like Paul I still declare it when there's more than one property -- the only real reason I do that though is it makes it simpler to cut and paste between elements if need be or to simply re-arrange.

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    Can I get rid of all spaces within { } brackets? Thank you
    It depends. Inside, I think yes, outside at least IE7- needs some breathing space for pseudo-elements, cf.:

    http://www.satzansatz.de/cssd/pseudocss.html

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input, what about font-family:Arial, Helvetica, Sans-Serif does that have to have spaces? I know I should be using font: just investigating it. I think I can get rid of a load of these font-family attributes in my css and just put one on the body tag which will work for them all

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bayliss Trevor View Post
    Thanks for the input, what about font-family:Arial, Helvetica, Sans-Serif does that have to have spaces? I know I should be using font: just investigating it. I think I can get rid of a load of these font-family attributes in my css and just put one on the body tag which will work for them all
    If you mean the spaces after the comma then no you don't need them but you will need spaces inside quoted values or font names that are more than one word. A lot of shorthand rules will need spaces in IE7 and under as it will get things wrong. For example when using the background shorthand there must be a space after the bracket that surrounds the url or IE7 will not read the rule correctly.

    You should only need to declared the font family on the body for most elements. There are odd exceptions in various browsers and some odd tags like pre will have a more specific default font applied but they are few and far between. In old IE tables wouldn't inherit the font family or size either.

    However, I don't think you are going to save much space by removing the spaces and if that was what you wanted then you could just use one of the minifying scripts to do it for you and then keep a copy of a readable stylesheet for working on. In the end the savings you make could most likely be offset by optimising one of your images better.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    However, I don't think you are going to save much space by removing the spaces and if that was what you wanted then you could just use one of the minifying scripts to do it for you and then keep a copy of a readable stylesheet for working on. In the end the savings you make could most likely be offset by optimising one of your images better.
    OR by using simpler code, condensing like properties, removing redundancies, etc, etc...

    Which is why as a rule I consider minification (also known as white space stripping) to be in most every case I've seen it used being little more than trying to hide bad code instead of fixing it.

    Especially if you bother having your server set to mod_deflate/gzip anyways!

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies Paul and deathshadow on the font question, very interesting info, I have learnt a lot and now I am going to implement it all


Bookmarks

Posting Permissions

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