www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] How to abstract font sizes?

  1. #1
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    resolved [RESOLVED] How to abstract font sizes?

    I'm experimenting with csslint. I'm getting warnings like:
    Too many font-size declarations (10), abstraction needed.
    So, as an example, if I have
    Code:
    .alert { color: #00008b; background-color: #c9c9c9; font-weight: bold; font-size: 14px; }
    and
    Code:
    .err { color: #8b0000; background-color: #c9c9c9; font-weight: bold; font-size: 14px; }
    How do I abstract font-size: 14px;

    thanks
    tim
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,108
    I don't use that tool, but it's possible that it's complaining that your CSS redefines the font-size property for a given selector more times than csslint can track the inheritance chain. That is, it could be that there's an element that is nested deeply in your document, and some/most/every parent element's CSS setting includes a definition for font-size.

    Or it could be something else entirely. Have you checked the documentation?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jul 2012
    Location
    New York
    Posts
    1
    This may be specified in the template file- check your theme folder for the file comment.tpl.php (assuming you're using phptemplate as the theme engine).

  4. #4
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    Thumbs up

    Since the opening of the thread, I have done some research of csslint, and it appears to be rather controversial.
    I've gone to using W3C directly.
    See http://jigsaw.w3.org/css-validator/v...rning=&lang=en
    Where I get a pass. And you can see the original code at
    http://alaskamls.com/css/legalNotices.css

    theresamaecrowe - I don't use PHP, I use my own python MVC framework and templating system.

    rtrethewey - what validation tools do you use?
    thanks to both of you for your replies and concern
    cheers
    tim
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  5. #5
    Join Date
    Mar 2011
    Posts
    1,108
    I rarely use validators for my own code because I code by hand. I use the Web Developer toolbar in Firefox to flag CSS errors. When I do need a HTML validator, I use the W3C's.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132
    Quote Originally Posted by rtrethewey View Post
    I rarely use validators for my own code because I code by hand. I use the Web Developer toolbar in Firefox to flag CSS errors. When I do need a HTML validator, I use the W3C's.
    I code by hand also. I'm going to stick with W3C.
    Thank you
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  7. #7
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    Ideally you would use relative font sizes instead. For instance with units like em or %, rather than px or pt.

    It used to be the case that some browsers would not let the user resize the text when absolute units were specified, happily these days are behind us, nevertheless it's still a good practice to keep things fluid or elastic where you can.
    Every fight is a food fight when you’re a cannibal.

  8. #8
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    Thumbs up

    Quote Originally Posted by David Harrison View Post
    Ideally you would use relative font sizes instead. For instance with units like em or %, rather than px or pt.

    It used to be the case that some browsers would not let the user resize the text when absolute units were specified, happily these days are behind us, nevertheless it's still a good practice to keep things fluid or elastic where you can.
    David, perhaps that is what csslint was referring to by 'abstraction'. Therefore, to use a relative font size, do you not have to have a 'base size'?
    If so, can you give me an example? Must be some css rule that I am unacquainted with, and that would not be a surprise.
    thank you
    tim
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  9. #9
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    The browser has a default font size already, and users can change this (up or down). For instance, Firefox has a zoom feature which will resize everything, but can also be used to just alter the text size alone. This is handy for those with high dpi notebook screens, stupid Apple "retina" displays or those with normal screens who have trouble seeing small writing.

    If you use a relative font size for an element, then it is relative to the parent elements font size. If you don't set a font-size on an element, then it is inherited from the parent element.

    If you set a relative font-size on the <body> element (of you don't, but then set a relative font size on some child element of the body), then it will be relative to the browsers default font size.

    The W3C recommend using the unit "em" for the font-size, though % would work in much the same way. Setting a font size of 1em or 100% would mean that an element would have the same font size as its parent element.

    You can also use the unit em for things such as padding and margins if you wish. This means that as the text size is increased or decreased, proportionally the amount of whitespace around the text stays constant.

    Here is a short page on font sizes at the W3C:
    http://www.w3.org/QA/Tips/font-size
    Every fight is a food fight when you’re a cannibal.

  10. #10
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    Thumbs up

    Thank you for the clear reply and the URL. This puts me on
    the right track.
    regards
    tim
    P.S. - The forum software isn't allowing me to upgrade my vote.
    So, just for the record - I am calling it Excellent
    Last edited by tim042849; 07-08-2012 at 01:00 PM.
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles