WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Здравствуйте! Нужна помощь с файлами css

Уже несколько дней бьюсь с подключениями файлов css в functin.php. Все остальные файлы подключаются нормально кроме медиа - запросов.

add_action( 'wp_enqueue_scripts', 'css_style', 20);

function css_style() {
	wp_enqueue_style( 'normalize', get_template_directory_uri() . '/assets/css/logo_author.css' );
	wp_enqueue_style( 'author', get_template_directory_uri() . '/assets/css/normalize.css' );
	wp_enqueue_style( 'main', get_template_directory_uri() . '/assets/css/main.css' );
	wp_enqueue_style( 'responsive', get_template_directory_uri() . '/assets/css/responsive.css' );
}

Последний файл responsive.css, это css для планшетов и сотовых. В инспекторе кода он отображается в последнюю очередь, как и положено после main.css, но стили оттуда не работают. В обычной верстке все работает отлично! Что я делаю не правильно, подскажите пожалуйста.

0
braza
19 апреля 2019
  • -1
    el-lable280 el-lable.ru

    со стилями я использую такую конструкцию

    add_action( 'wp_enqueue_scripts', 'css_style', 20);
    
    function css_style() {
    	wp_enqueue_style('owl', get_template_directory_uri() . "/css/owl.carousel.css");
    	wp_enqueue_style('fancybox', get_template_directory_uri() . "/css/jquery.fancybox.min.css");
    	wp_enqueue_style('style', get_stylesheet_uri());
    }

    а в файле темы style.css уже подключаю то что нужно

    @import url('css/reset.css');
    @import url('css/elements.css');
    @import url('css/blocks.css');
    @import url('css/template.css');
    @import url('css/media.css');
    
    braza 19 Апр. 2019

    О спасибо! Буду попробовать!

    campusboy 20 Апр. 2019

    Не рекомендуется использовать import, "почему?" мы писали в статье Альтернатива @import в дочерних темах

    el-lable 20 Апр. 2019

    campusboy, эта статья бородата как мои трусы, не несите этот бред сюда.

    braza 20 Апр. 2019

    Вроде с файлом медиа-запроса справился, но теперь возникла другая проблема. Хром и Опера на разрешении от планшета и ниже совершенно игнорирует прописаные стили. В Лисичке все тип топ. Может ли это зависеть от версии css которую автоматически прописывает ВП? То есть в конец добавлет 5.1.1 Использую Бутстрап и современнее display: flex не использовал.

    el-lable 20 Апр. 2019

    ctrl+F5

    campusboy 20 Апр. 2019

    И в чём бородатость? Выдержка из документации Google от 12 февраля 2019 года:

    Avoid CSS imports

    The CSS import (@import) directive enables one stylesheet to import rules from another stylesheet file. However, avoid these directives because they introduce additional roundtrips into the critical path: the imported CSS resources are discovered only after the CSS stylesheet with the @import rule itself is received and parsed.

    el-lable 20 Апр. 2019

    внимательно прочитайте о чем статья

    Kama 20 Апр. 2019

    el-lable, статья там о том, что при @import невозможно добиться параллельной загрузки css файлов в браузере. А это потери +/-200ms. И твой случай с импортами не исключение!

    Т.е. в твоем примере, чтобы перейти к загрузке импортов, браузер должен сначала получить контент файла style.css и никак иначе. Тогда как если все это выложить в HTML, браузер не будет ждать контента одного файла, чтобы загрузить контенты других файлов.

    При чем тут бородатость статьи и почему у тебя трусы бородатые я решительно не понимаю smile

    П.С. Дробить css на файлы - это хорошо и правильно, но только не в такой реализации. Дробится это все в препроцессорах, потом компилится в один файл, который подключается в HTML. Твой пример рабочий, но нифига не оптимальный! Так не делается, если по хорошему...

    Комментировать
  • 0
    Kama7641

    Ты по коду все правильно подключаешь, проблема тут не в подключении скорее всего, а в самих стилях. Может быть, у тебя просто приоритета селекторов в медиа стилях не хватает, чтобы перебить оригинальные стили.

    Например:

    Основной стиль в main.css такой:

    .parent div.class{ color:red; }

    Далее идут медиа стили в responsive.css в таком виде:

    @media ( max-width: 780px ) {
    	.parent .class{ color:blue; }
    }

    В этом случае несмотря на то что медиа стили подключаются ниже, все равно сработают стили основного файла main.css.

    -

    Но странно что разные браузеры по-разному реагируют - эта логика едина для всех браузеров должна быть.

    -

    Приведи куски css стилей из файла main.css и из responsive.css, думаю проблема где-то там...

    braza 20 Апр. 2019

    Я все грешил на ВП, но я осел (признаю), удалил мета тег viewport и забыл восстановить его. В этом и была причина, стыдно мне, очень!

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация