Jump to content

Leaderboard


Popular Content

Showing content with the highest reputation on 01/04/2019 in all areas

  1. 1 point
    BrowserBugs

    CSS Stylesheets for multiple devices

    Yes, I consider critical css which forms the first paint, then if it's not required to paint it can go elsewhere. So for example in your case for style.css it would be something like; @import url(font-awesome.min.css); /* Basic */ body, input, select, textarea { font-size: 12pt; color: #646464; font-family: "gotham_mediumregular"; font-weight: 300; line-height: 1.75em; } body.is-loading * { -moz-animation: none !important; -webkit-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } a { color: #fff; text-decoration: none; font-family: 'gotham'; } a:visited { color: #fff; } strong, b { color: #545454; font-weight: 700; } em, i { font-style: italic; } p { margin: 0 0 2em 0; font-family: 'gotham'; } @media all and (max-width: 800px){ a { color: #333333; } p { font-size: 0.65em; } } ... cleaned it up a bit for you. Then in a second core sheet (e.g. foot.css) something like; a { -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; } a:hover { text-decoration: none; color: #e2dede !important; border-bottom-color: transparent; } @media all and (max-width: 800px){ a:hover { color: #e2dede !important; } } ... as these bits are really only required once the page has loaded and can be interacted with. Second I use javascript to loads these non critical css files with noscript links in the head. <!DOCTYPE html> <html lang="en-GB"> <head> <link href="/css/core.css" rel="stylesheet" type="text/css"> <noscript> <link href="/css/foot.css" rel="stylesheet" type="text/css"> </noscript> </head> <body> .... <script type="text/javascript"> function loadjscssfile(filename, filetype){ if(filetype=="js"){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); fileref.setAttribute("charset", "utf-8"); } if(filetype=="css"){ var fileref=document.createElement('link'); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); } if(typeof fileref!="undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); } } loadjscssfile("/css/foot.css", "css"); loadjscssfile("/js/somejsfile.js", "js"); </script> </body> </html>
×