Hoppa till innehåll

Förladda CSS med HTML och JavaScript

Den här handledningen visar hur du förladdar CSS med HTML och JavaScript. Det är rekommenderat att förladda och/eller att lägga CSS i html-dokumentet för att förbättra hastigheten på en webbplats. Denna handledning innehåller ett fullständigt exempel som du kan använda för att testa förladdning.

Förladdning innebär att en resurs skall renderas så snart som möjligt, men utan att blockera sidans renderingsprocess. Många resurser kan laddas samtidigt, en förladdad resurs kommer att renderas när den har lästs in. Förutom stilar kan du även förladda ljud, dokument, skript, teckensnitt, videor, bilder och fler resurser.

Det här tillägget har testats och fungerar med Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4), Microsoft Edge (42.17134.1.0), detta utan någon polyfill. Tillägget fungerar i Internet Explorer (11.829.17134.0) med en CSS-polyfill från Filament Group. Om du vill stödja äldre webbläsare kan du läsa vårt inlägg om transpilering och komplettering av JavaScript.

Formatmallar

Vi använder tre formatmallar i det här exemplet. Layoutstilen som visas nedan innehåller mediefrågor för olika skärmstorlekar. Olika formatmallar för olika skärmstorlekar kanske inte laddas när skärmstorleken förändras, det är därför säkrast att bara använda en formatmall för layouten.

/* Standard layout */
@media screen and (min-width: 1280px) 
{
    .layout-outer-container {
        margin: 0px auto 0px auto;
        width: 1280px;
    }

    .layout-container-left {
        float: left;
        position: relative;
        width: 976px;
        background-color: #FFFFFF;
    }

    .layout-standard-header {
        clear: both;
        width: 976px;
        height: 34px;
        background-color: #ddddde;
    }

    .layout-mobile-header {
        display: none;
    }

    .layout-searchbox {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .layout-menu {
        float: left;
        display: block;
        width: 280px;
        min-height: 532px;
    }

    .layout-menu-padding {
        padding: 20px 15px 20px 15px;
    }

    .layout-donation {
        display: block;
        border: 1px solid #808080;
        padding: 5px;
        text-align: center;
    }

    .layout-content {
        float: left;
        width: 696px;
        height: auto;
        overflow: auto;
    }

    .layout-content-padding {
        padding: 20px 15px 20px 15px;
    }

    .layout-container-right {
        float: left;
        width: 304px;
    }

    .layout-fixed-ad {
        display: block;
        margin-left: 4px;
        position: absolute;
    }

    .layout-footer {
        clear: both;
        width: 976px;
        font-size: 16px;
        line-height: 32px;
        background-color: #ddddde;
    }

    .layout-footer-padding {
        padding: 5px 5px 5px 10px;
    }

    .adslot-top {
        display: inline-block;
        width: 336px;
        height: 280px;
    }

    .adslot-bottom {
        display: inline-block;
        width: 336px;
        height: 280px;
    }
}

/* Medium layout */
@media only screen and (min-width: 976px) and (max-width: 1279px) 
{
    .layout-outer-container {
        margin: 0px auto 0px auto;
        width: 976px;
    }

    .layout-container-left {
        float: left;
        position: relative;
        width: 976px;
        background-color: #FFFFFF;
    }

    .layout-standard-header {
        clear: both;
        width: 976px;
        height: 34px;
        background-color: #ddddde;
    }

    .layout-mobile-header {
        display: none;
    }

    .layout-searchbox {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .layout-menu {
        float: left;
        display: block;
        width: 280px;
        min-height: 532px;
    }

    .layout-menu-padding {
        padding: 20px 15px 20px 15px;
    }

    .layout-donation {
        display: block;
        border: 1px solid #808080;
        padding: 5px;
        text-align: center;
    }

    .layout-content {
        float: left;
        width: 696px;
        height: auto;
        overflow: auto;
    }

    .layout-content-padding {
        padding: 20px 15px 20px 15px;
    }

    .layout-container-right {
        display: none;
    }

    .layout-fixed-ad {
        display: none;
    }

    .layout-footer {
        clear: both;
        width: 976px;
        font-size: 16px;
        line-height: 32px;
        background-color: #ddddde;
    }

    .layout-footer-padding {
        padding: 5px 5px 5px 10px;
    }

    .adslot-top {
        display: inline-block;
        width: 336px;
        height: 280px;
    }

    .adslot-bottom {
        display: inline-block;
        width: 336px;
        height: 280px;
    }
}

/* Mobile layout */
@media only screen and (max-width: 975px) 
{
    .layout-outer-container {
        margin: 0px auto 0px auto;
        max-width: 1280px;
    }

    .layout-standard-header {
        display: none;
    }

    .layout-mobile-header {
        clear: both;
        position: relative;
        max-width: 1280px;
        height: 34px;
        text-align: center;
        background-color: #ddddde;
    }

    .layout-menu {
        display: none;
        z-index: 5;
        position: absolute;
        width: 280px;
        height: auto;
        background-color: #ffffff;
        border-right: 1px solid #808080;
        border-bottom: 1px solid #808080;
    }

    .layout-menu-padding {
        padding: 20px 15px 20px 15px;
    }

    .layout-donation {
        display: block;
        border: 1px solid #808080;
        padding: 5px;
        text-align: center;
    }

    .layout-searchbox {
        display: none;
        z-index: 5;
        max-width: 1280px;
        padding: 5px;
        background-color: #ffffff;
        text-align: right;
        border-bottom: 1px solid #808080;
    }

    .layout-content {
        max-width: 1280px;
        background-color: #ffffff;
    }

    .layout-content-padding {
        padding: 20px 15px 20px 15px;
    }

    .layout-container-right {
        display: none;
    }

    .layout-fixed-ad {
        display: none;
    }

    .layout-footer {
        clear: both;
        max-width: 1280px;
        font-size: 16px;
        line-height: 32px;
        background-color: #ddddde;
    }

    .layout-footer-padding {
        padding: 5px 5px 5px 10px;
    }

    .adslot-top {
        display: none;
    }

    .adslot-bottom {
        display: inline-block;
        width: 300px;
        height: 250px;
    }
}

Vi har också en CSS-fil med allmänna stilar som inte påverka hemsidans layout.

/* General css */
a, a:visited {
    font-family: Verdana;
    color: #4a5c84;
    text-decoration: underline;
}

a:hover, a:visited:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    border: 0px;
    margin: 0px;
    vertical-align: top;
}

td {
    vertical-align: top;
    text-align: left;
    font-size: 14px;
    line-height: 21px;
    padding: 2px;
    word-break: break-all;
}

h1 {
    color: #000000;
    font-family: Verdana;
    font-size: 28px;
    line-height: 42px;
    font-weight: bold;
    margin: 0px 0px 10px 0px;
}

h2 {
    color: #000000;
    font-family: Verdana;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
}

input, textarea {
    font-size: 16px;
    line-height: 24px;
    font-family: Verdana;
    color: #000000;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Basic styles*/
.search-textbox {
    width: 200px;
    border: solid 1px #666666;
}

.search-button {
    cursor: pointer;
    border: 0px;
    background-color: transparent;
    color: #4a5c84;
    text-align: center;
    font-weight: bold;
    padding-left: 4px;
    font-size: 16px;
    line-height: 28px;
}

.basic-breadtext {
    font-size: 16px;
    line-height: 24px;
}

.basic-space {
    margin-bottom: 10px;
}

.basic-space-2x {
    margin-bottom: 20px;
}

.basic-line {
    clear: both;
    border-top: 1px solid #9e9e9e;
}

.basic-button {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    background-color: #4a5c84;
    color: #ffffff !important;
    font-weight: normal;
    border-radius: 2px;
    padding: 7px 10px 7px 10px;
    margin: 0px;
    text-decoration: none;
    cursor: pointer;
    border: 0px;
}

.basic-button:hover {
    background-color: #34405B;
    text-decoration: none;
}

.block-button {
    display: block;
    width: 100%;
    padding: 6px 0px 6px 0px;
}

/* Input form*/
.textbox {
    border: 1px solid #666666;
    padding: 2px;
    max-width: 600px;
    margin: 0px;   
}

/* Social sharing */
.share-content {
    padding: 6px 0px 0px 0px;
}

/*Menu*/
.menu-link, .menu-link:visited {
    font-size: 16px;
    font-weight: bold;
    color: #4a5c84;
    line-height: 32px;
    vertical-align: middle;
    padding-left: 2px;
    text-decoration: underline;
    cursor: pointer;
}

.submenu-link, .submenu-link:visited {
    font-size: 16px;
    line-height: 30px;
    font-weight: normal;
    color: #696565;
    vertical-align: middle;
    padding-left: 2px;
    cursor: pointer;
}

.menu-group {
    display: none;
}

/*Cookie consent*/
.cookie-consent {
    display: none;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    color: #000000;
    background-color: #d9d9d9;
    border-bottom: 1px solid #9e9e9e;
    padding: 10px 0px 10px 0px;
    text-align: center;
}

.cookie-consent-text {
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
}

Den sista formatmallen är till för utskrift, den här formatmallen skall ändra andra stilar för att få sidorna att se snygga ut när de skrivs ut. Denna formatmall används främst för att dölja behållare i layouten.

/* Print style */
.noprint {
    display: none;
}
.layout-content {
    background-color: #ffffff;
}

HTML och JavaScript

Förladdade formatmallar har preload som dess rel-attribut, style som dess as-attribut och en onload-händelse som ändrar rel-attributet när CSS-filen har lästs in. Vissa resurser behöver inte laddas i förväg, till exempel favicon och utskriftsstilen. Vi har också inkluderat en polyfill för IE 11, det är säkert att inkludera denna polyfill eftersom den testar om webbläsaren har stöd för förladdning. Mycket viktig styling bör inkluderas i html-dokumentet som visas nedan.

<!DOCTYPE html>

<html>
<head>
    <title>Preload CSS</title>
    <meta charset="utf-8" />
    <meta name="handheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=yes" />

    <!-- Resources -->
    <link href="/favicon.png" rel="shortcut icon" type="image/x-icon" />
    <link href="/css/layout.css" rel="preload" as="style" onload="this.rel='stylesheet'" />
    <link href="/css/styling.css" rel="preload" as="style" onload="this.rel='stylesheet'" />

    <!-- Very important styling -->
    <style>
        body {
            padding: 0px;
            margin: 0px;
            height: 100%;
            text-align: left;
            background-color: #4a5c84;
            font-family: Verdana;
        }
    </style>

</head>
<body>

    <div class="cookie-consent">
        <span class="cookie-consent-text">Cookies and custom ads help us deliver our services. By using our services you agree to our use of cookies and custom ads.</span>
        <button type="button" class="basic-button">Got it!</button>
        <a href="/privacypolicy" class="cookie-consent-text">Read more</a>
    </div>

    <div class="layout-outer-container">
        <div class="layout-container-left">
            <div class="layout-standard-header noprint">
                <a href="/" style="font-size:18px;line-height:34px;padding-left:5px;">Testsite.se - testing to preload CSS</a>
            </div>
            <div class="layout-mobile-header noprint">
                <a href="/" style="font-size:18px;line-height:34px;">Testsite.se</a>
            </div>
            <div class="layout-searchbox noprint">
                <input type="text" class="search-textbox" />
                <input type="button" class="search-button" value="Search" />
            </div>
            <div class="layout-menu noprint">
                <div class="layout-menu-padding">
                    <a class="menu-link" href="/item1" rel="nofollow">Item 1</a><br />
                    <a class="menu-link" href="/item2" rel="nofollow">Item 2</a><br />
                    <a class="menu-link" href="/item3" rel="nofollow">Item 3</a><br />
                    <a class="menu-link" href="/item4" rel="nofollow">Item 4</a><br />
                </div>
            </div>
            <div class="layout-content">
                <div class="layout-content-padding basic-breadtext">
                    <h1>Welcome to our website</h1>
                    <p>A Name Not Yet Taken AB is a creative company that helps businesses and individuals by offering products that provide both content and entertainment.</p>
                    <p>A Name Not Yet Taken AB was founded on 13 September 2011 and has taken over the business from JFS Bokforing HB, which started in early 2005.</p>
                    <p>Our business is project-based because we usually works on new projects in our daily activities. Our product portfolio consists of websites, games and apps for Android. We also have a small consulting business for accounting and programming, but our main focus is on improving existing products and developing new products.</p>
                </div>
            </div>
            <div class="layout-footer">
                <div class="layout-footer-padding">
                    <a href="https://www.annytab.com" target="_blank" rel="publisher">A Name Not Yet Taken AB</a>  © 2019
                </div>
            </div>
        </div>
        <div class="layout-container-right noprint">
            <div class="layout-fixed-ad">
                <a href="https://www.doxservr.com" rel="nofollow" class="doxservr-right-ad">
                    <img src="https://www.bokforingstips.se/images/doxservr-v2-300x250.jpg" alt="Doxservr" style="display:block;max-width:300px;border:0px;" />
                </a>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <link media="print" href="/css/print_style.css" rel="stylesheet" />
    <script src="/js/polyfills/csspreloader.min.js"></script>

</body>
</html>
Etiketter:

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *