Здравствуйте! Нужна помощь с файлами 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, но стили оттуда не работают. В обычной верстке все работает отлично! Что я делаю не правильно, подскажите пожалуйста.
со стилями я использую такую конструкцию
а в файле темы style.css уже подключаю то что нужно
О спасибо! Буду попробовать!
Не рекомендуется использовать import, "почему?" мы писали в статье Альтернатива @import в дочерних темах
campusboy, эта статья бородата как мои трусы, не несите этот бред сюда.
Вроде с файлом медиа-запроса справился, но теперь возникла другая проблема. Хром и Опера на разрешении от планшета и ниже совершенно игнорирует прописаные стили. В Лисичке все тип топ. Может ли это зависеть от версии css которую автоматически прописывает ВП? То есть в конец добавлет 5.1.1 Использую Бутстрап и современнее display: flex не использовал.
ctrl+F5
И в чём бородатость? Выдержка из документации 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, статья там о том, что при @import невозможно добиться параллельной загрузки css файлов в браузере. А это потери +/-200ms. И твой случай с импортами не исключение!
Т.е. в твоем примере, чтобы перейти к загрузке импортов, браузер должен сначала получить контент файла style.css и никак иначе. Тогда как если все это выложить в HTML, браузер не будет ждать контента одного файла, чтобы загрузить контенты других файлов.
При чем тут бородатость статьи и почему у тебя трусы бородатые я решительно не понимаю
П.С. Дробить css на файлы - это хорошо и правильно, но только не в такой реализации. Дробится это все в препроцессорах, потом компилится в один файл, который подключается в HTML. Твой пример рабочий, но нифига не оптимальный! Так не делается, если по хорошему...
Ты по коду все правильно подключаешь, проблема тут не в подключении скорее всего, а в самих стилях. Может быть, у тебя просто приоритета селекторов в медиа стилях не хватает, чтобы перебить оригинальные стили.
Например:
Основной стиль в main.css такой:
Далее идут медиа стили в responsive.css в таком виде:
В этом случае несмотря на то что медиа стили подключаются ниже, все равно сработают стили основного файла main.css.
-
Но странно что разные браузеры по-разному реагируют - эта логика едина для всех браузеров должна быть.
-
Приведи куски css стилей из файла main.css и из responsive.css, думаю проблема где-то там...
Я все грешил на ВП, но я осел (признаю), удалил мета тег viewport и забыл восстановить его. В этом и была причина, стыдно мне, очень!