Оптимизация CSS

268

12 апреля 2018, 09:37

Есть такая проблема на сайте. У меня по ходу много CSS кода. Я хочу сделать такую оптимизацию.

1) Разделить css на файлы mobile, desctop.

2) Загружать их отдельно при каждом устройстве свое.

Первое вообще не проблема. Но вот сделать второй пункт затрудняюсь.

Это можно сделать на серверной части, Но я хочу знать есть какие то методы что бы это можно было сделать на клиентской части?

Есть такой вариант.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style-400.css" media="only screen and (max-width: 960px)">

Здесь проблема в том что второй CSS браузер все ровно загружает. Но не исполняет если параметр media не соответствует браузеру.

Есть альтернативные варианты что бы вот к примеру и второй не загружался если браузер не совпадает с критериями?

Answer 1

Можно проверять ширину экрана устройства на JavaScript и загружать нужные стили:

// Style from Mobile
if (document.documentElement.clientWidth < 1024) {
    // Make a stylesheet link
    var mobileCSS = document.createElement( "link" );
    mobileCSS.rel = "stylesheet";
    mobileCSS.href = "mobile_styles.css";
    // Insert it at the end of the head in a legacy-friendly manner
    document.head.insertBefore( mobileCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
}
// Style from Desctop
if (document.documentElement.clientWidth >= 1024) {
    // Make a stylesheet link
    var desctopCSS = document.createElement( "link" );
    desctopCSS.rel = "stylesheet";
    desctopCSS.href = "desctop_styles.css";
    // Insert it at the end of the head in a legacy-friendly manner
    document.head.insertBefore( desctopCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
}