{"id":1502,"date":"2018-01-19T19:22:55","date_gmt":"2018-01-19T19:22:55","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/browser-detection-and-appropriate-css-generation\/"},"modified":"2018-01-19T19:24:50","modified_gmt":"2018-01-19T19:24:50","slug":"browser-detection-and-appropriate-css-generation","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/browser-detection-and-appropriate-css-generation\/","title":{"rendered":"Browser Detection and Appropriate CSS Generation"},"content":{"rendered":"
\n
\n
By Tim Perdue<\/div>\n
on August 20, 2000<\/div>\n<\/p><\/div>\n
\"picture<\/p>\n
\nWhoever said CSS would solve all your cross-platform browser display issues needs
\nto lay off the pipe a little. I have yet to get CSS to work perfectly across all browsers \/
\nplatforms, but I have gotten it to work “good enough” to get by.<\/div>\n
\nI did it by using some fairly simplistic browser detection, as in recycling a library I
\nwrote for SourceForge (which was recycled from a library on GotoCity.com).<\/div>\n
\nHere are some of the things I discovered while setting up CSS on a handful of sites:<\/div>\n
\n
    \n
  1. If you don’t set a font at all, users will complain because their browser
    \ndefaults are either too big or too small – as if it’s your fault.<\/li>\n
  2. Using the CSS1 font-size:<\/b> tag with a specific point size like 12pt<\/b> breaks
    \nsome browsers on some platforms (Netscape on Wintel).<\/li>\n
  3. Even if that weren’t the case, point sizes are different on different platforms
    \n(Macs display fonts smaller than Windows).<\/li>\n
  4. And even if they rendered the same across all platforms, it’s a really bad idea
    \nto hard-code sizes, as there are many people with impaired vision. When you hard-code
    \na point-size, they can’t override the size with their browser, and thus can’t see your site.
    \nOne of the worst sites on the internet is CNN.com, which hard-codes very small fonts into
    \ntheir CSS sheet.<\/li>\n
  5. Because of this, you should stick with scaling percentages or the size syntax
    \n(small, medium, x-small, etc).<\/li>\n<\/ol>\n<\/div>\n
    \nWith those hard-learned lessons in mind, you can design a browser-smart CSS sheet and
    \ngenerate it with PHP. I won’t go into details on CSS here. You can view the spec and
    \nexamples at
    \nhttp:\/\/www.w3.org\/Style\/CSS\/Test\/19981002\/<\/a>.<\/div>\n
    \nMost of that spec was completely ignored by the geniuses at Netscape and Microsoft, which
    \nis why it has become such a headache for developers.<\/div>\n<\/div>\n

    <\/p>\n

    \n
    1<\/div>\n
    | <\/div>\n
    2<\/a> <\/div>\n
    | <\/div>\n
    3<\/a> <\/div>\n
    | <\/div>\n
    4<\/a> <\/div>\n
    Next Page \u00bb<\/a><\/div>\n<\/div>\n

    Download: tim20000821.zip<\/a>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

    By Tim Perdue on August 20, 2000 Whoever said CSS would solve all your cross-platform browser display issues needs to lay off the pipe a little. I have yet to get CSS to work perfectly across all browsers \/ platforms, but I have gotten it to work “good enough” to… <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1502","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1502"}],"version-history":[{"count":2,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1502\/revisions"}],"predecessor-version":[{"id":2409,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1502\/revisions\/2409"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}