Проверить подключена ли css

Не подключается CSS, в чем может быть проблема?

Не подключается CSS, более того, не могу задать стили даже в самом HTML. Пробовала и различные коды подставлять, взятые из учебников, мало ли, может я чего не правильно в этом плане делаю, и под разными браузерами страницу сайта открывала — результата вообще никакого, надпись черным по белому, никакого фона, никакие картинки не вставляются. Подскажите, что еще можно сделать в таком случае?

Абстрактно Вам сложно помочь.Код страницы пришлите и код таблицы стилей, которая не подключается. И второе на Вашем локальном компьютере работает? — 8 лет назад

в файле main.css прописано
h1

Но ничего не происходит — 8 лет назад

stylesheet — какая то буква неверно написана
Вставьте вот эту строку копированием:

И вообще если проблемы копируйте строки с кода работающего сайта.Буквы визуально одинаковые, но легко ошибиться и ляпнуть русскую вместо латинской.
Распространенные ошибки. Используют в названии файлов заглавные буквы.Для винды побарабану, а для nix- систем под которыми сервера пашут это могут быть разные файлы.Чтобы не искать ошибки всегда используйте в названиях файлов и картинок только маленькие латинские буквы. — 8 лет назад

Если у вас не подключается CSS к Web-странице, то причин может быть несколько. Рассмотрим их по очереди.

Неверный HTML-код, описывающий таблицу стилей.

Стили CSS подключаются с помощью тега «Link» в теге «Head». Правильное описание:

Как правило, файлы с CSS хранятся в отдельной папке, поэтому в описании перед именем файла нужно указывать соответствующий каталог.

Например, href = «Styles/style-table.css».

Несоответствие пути файла, указанного в описании таблицы стилей CSS, реальному расположению файла.

Если у вас сложная структура на сайте, то иногда можно запутаться с уровнями вложенности.

Например, файл с таблицей стилей CSS лежит в отдельном каталоге, расположенном в корне сайта:

Вы подключаете его в файле, расположенном в подкаталоге:

Так вот, нужно писать в пути файла href = «../Styles/style-table.css», а не href = «Styles/style-table.css».

Ошибки в файле CSS

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

Источник

Проверяем браузер на поддержку определённого CSS свойства

Поддержка браузерами того или иного CSS свойства до сих пор остаётся одной из основных проблем веб-вёрстки, так как корректировка под различные браузера, особенно старые, занимает очень много времени и портит настроение. Поэтому многие верстальщики ограничиваются поддержкой IE с помощью условных комментариев, а некоторые вообще забивают на старые браузера и блокируют доступ к своему сайту со старых версий выводя сообщение типа «Ваш браузер устарел. ».

В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное CSS свойство.

CSS проверка на поддержку

Долгое время проверить поддержку с помощью одного CSS было невозможно. Но в 2013 году Firefox, Chrome и Opera «объявили» о поддержки специальной директивы под названием @supports и её JavaScript аналога — функции CSS.supports() , про которую я буду писать ниже. С помощью этой директивы, можно проверить браузер на поддержку указанного CSS свойства.

Если браузер поддерживает свойство display: flex , то он запустит свойства из директивы.

С помощью ключевого слова not, можно осуществить проверку на отсутствие поддержки какого-либо свойства.

Если браузер не поддерживает display: flex , то он запустит свойства из директивы

@supports not (display: flex) < /* Стили */ >

Используя ключевое слово or, можно осуществить проверку на поддержку хотя бы одного свойства из указанных.

Если браузер поддерживает display: flex или display: -webkit-flex , то он запустит свойства из директивы

@supports (display: flex) or (display: -webkit-flex) < /* Стили */ >

Если указать ключевое слово and, то можно проверить поддержку браузером двух или более свойств сразу.

Если браузер поддерживает display: flex и display: -webkit-flex , то он запустит свойства из директивы

@supports (display: flex) and (display: -webkit-flex) < /* Стили */ >

Множественные проверки и условия

Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то он запустит свойства из директивы

@supports ((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap) < /* Стили */ >

JavaScript проверка на поддержку

Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.

С помощью функции CSS.supports() , про которую я упоминал выше.

Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true , если свойство поддерживается, и false — если нет.

Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:

Если браузер поддерживает display: flex , то скрипт вернёт true .

CSS.supports("display", "flex"); /* true / false */

Второй вариант требует передачи в качестве аргумента целой строки:

Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то скрипт вернёт true .

CSS.supports("((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap)"); /* true / false */

Когда-то я заметил, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.

В итоге у нас выходит следующая функция:

var SupportsCSS = function (property, value) < try < // Создаём элемент var element = document.createElement('span'); // Проверяем, поддерживает ли браузер данное свойство if (element.style[property] !== undefined) element.style[property] = value; // Если поддерживает, то присваиваем значение else return false; // Если нет, то возвращаем false // Если браузер поддерживает данное значение для указанного свойства, то значения будут равны return element.style[property] === value; >catch (e) < // В случае со старым IE, при присваивании значения, которое не поддерживается, вылетает ошибка return false; >>;

Или же можно обойтись без try. catch , если будем записывать свойства через cssText :

var SupportsCSS = function (property, value) < // Создаём элемент var element = document.createElement('span'); // Проверяем, поддерживает ли браузер данное свойство if (element.style[property] !== undefined) element.style.cssText = property + ':' + value; // Вносим новое свойство в style элемента else return false; // Если браузер не поддерживает свойство, то возвращаем false // Если браузер поддерживает данное значение для указанного свойства, то значения будут равны return element.style[property] === value; >;

Проверка с помощью этой функции выглядит следующим образом:

SupportsCSS('display', 'flex'); /* true / false */ SupportsCSS('display', '-webkit-flex'); /* true / false */ SupportsCSS('display', '-ms-flexbox'); /* true / false */ 

Преимущество данной функции в том, что она будет работать во многих браузер, в том числе старых. Я протестировал функцию в браузерах IE, Edge, старом Safari, Chrome, Opera.

Примечание: если вы проверяете поддержку свойства в старом браузере, через эмулятор современного, то данный метод будем показывать true на значениях, которые не поддерживаются.

Это происходит из за того, что хоть вы и эмулируете старую версию, но браузер, через который вы это делаете, знает это значение CSS свойства и может применить.

На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.

Источник

Как определить, загружен ли CSS?

Проведя некоторое исследование и написав свой ответ, я наткнулся на эту ссылку это объясняет все, что вам нужно знать о CSS, когда он загружается и как вы можете его проверить. Предоставленная ссылка объясняет это настолько хорошо, что я добавляю некоторые цитаты из нее для дальнейшего использования.
_{Если вам интересно, мой ответ должен был быть № 2 и вариант № 4.}

Когда действительно загружается таблица стилей?

// my callback function // which relies on CSS being loaded function CSSDone() < alert('zOMG, CSS is done'); >; // load me some stylesheet var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css", head = document.getElementsByTagName('head')[0], link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; // MAGIC // call CSSDone() when CSS arrives head.appendChild(link); 

1. слушать ссылку.onload
2. слушать link.addEventListener(‘load’)
3. слушать link.onreadystatechange
4. setTimeout и проверьте наличие изменений в document.styleSheets
5. setTimeout и проверьте изменения в стиле определенного элемента, который вы создаете, но стиль с новым CSS

5-й вариант слишком сумасшедший и предполагает, что вы контролируете содержимое CSS, так что забудьте об этом. Кроме того, он проверяет текущие стили в тайм-ауте, что означает, что он сбрасывает очередь перекомпоновки и может быть потенциально медленным. Чем медленнее приходит CSS, тем больше перекомпоновок. Так что, действительно, забудьте.

Так как насчет реализации магии?

// MAGIC // #1 link.onload = function () < CSSDone('onload listener'); >; // #2 if (link.addEventListener) < link.addEventListener('load', function() < CSSDone("DOM's load event"); >, false); >; // #3 link.onreadystatechange = function() < var state = link.readyState; if (state === 'loaded' || state === 'complete') < link.onreadystatechange = null; CSSDone("onreadystatechange"); >>; // #4 var cssnum = document.styleSheets.length; var ti = setInterval(function() < if (document.styleSheets.length >cssnum) < // needs more work when you load a bunch of CSS files quickly // e.g. loop from cssnum to the new length, looking // for the document.styleSheets[n].href === url // . // FF changes the length prematurely :( CSSDone('listening to styleSheets.length change'); clearInterval(ti); >>, 10); // MAGIC ends 

Источник

Как правильно подключить CSS к HTML

CSS – это таблица стилей. От нее зависит то, как будет выглядеть ваш сайт, цвета в оформлении, шрифты, расположение элементов и т.п. Поэтому обойтись без CSS при создании сайтов и веб-приложений не получится. Важно уметь правильно использовать этот инструмент в ходе разработки своего проекта.

Настраиваем стили в HTML

В HTML есть несколько глобальных тегов:

• – в него оборачивается вся страница.
• – в нем может храниться логика приложения или ссылка на отдельные скрипты.
• – блок, где можно прописать CSS-разметку.

В блоке вы можете использовать все существующие свойства CSS. Менять цвет отдельных элементов страницы, обращаться к селекторам и менять их размер, делать медиа-запросы для создания адаптивной верстки и выполнять массу других задач.

В коде это может выглядеть так:

 
Какой-то контент
 
Еще какой-то контент
  p < color: red; >.text

Мы применили CSS к странице. Дополнительно прикреплять стили к нашему сайту не нужно.

inline-стили

Необязательно прописывать стили в отдельном блоке. Можно вовсе не использовать тег . Можно использовать одноименный атрибут.

Атрибуты представляют собой параметры, указываемые в HTML-элементах. class или id являются атрибутами. Если вы захотите поменять стиль для блока div, то после его класса нужно написать style и поочередно указать стили в формате CSS. В реальном коде это может выглядеть так:

Мы указали свойство flex у div-элемента и поменяли цвет текста внутри на синий.

Такой подход очень удобен, если нужно быстро скорректировать дизайн какого-то элемента или в череде одинаковых блоков с контентом выделить конкретный и стилизовать иначе. Применив стиль к одному div, все остальные вы не затронете. Если нужно более широко настроить стили, то придется все-таки использовать блок или отдельный файл с CSS-разметкой.

Настраиваем стили в отдельном CSS-файле

Это наиболее распространенный метод подключения CSS к сайту или приложению. Он используется как при работе с классическим стеком HTML/CSS/JavaScript, так и при подключении фреймворков в духе React.

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

Стандартное подключение к HTML

Нужно в HTML-файле добавить метатег link. Метатег link – тип ссылки – адрес файла со стилями.

HTML-файл автоматически соберет все стили из подключенного файла, опираясь на классы и другие параметры, указанные в разметке.

Подключение при помощи Webpack

Если в ходе разработки вы задействуете сборщик пакетов, то нужно зарегистрировать в нем специальный плагин. Например, css-loader, который преобразует все добавленные в него CSS-файлы в единый набор стилей, используемых в приложении.

Подключение к фреймворку React

В React используется стандарт ECMAScript2015. Для работы с CSS используется директива import.

Деление стилей на группы

Размещение стилей в отдельных CSS-файлах не только упрощает редактирование стилей и управление ими, но и позволяет не увеличивать количество кода в одном документе.

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

Подключаем чужие CSS-стили

При желании чужие стили тоже можно использовать. В теге , например, вы указываете локальный адрес сайта, но можно туда вставить и ссылку.

Это может понадобиться в том случае, если вы хотите использовать нормализатор (специальный файл с CSS-кодом, который удаляет специфичные теги и свойства, пытаясь устранить все расхождения в работе разных браузеров).

Также внешние стили могут применяться с целью добавить единый стиль из какой-то общепринятой дизайн-системы (часто компонентной).

Другие способы

Некоторые фреймворки подразумевают использование CSS без CSS-файлов в их привычном виде. По такому принципу работает фреймворк TailwindCSS. Сразу после установки он автоматически становится доступен в приложении на глобальном уровне, а вам лишь остается использовать добавленные классы в любой части приложения без необходимости отдельно подключать CSS.

Также некоторые компонентные библиотеки, такие как Vue и Svelte, не требуют хранить стили в отдельной директории и двигают пользователя к использованию стилей внутри блоков .

Вместо заключения

CSS бывает разным, и в некоторых ситуациях лучше использовать внешние стили, а в некоторых – прописывать их прямо в тегах с HTML-элементами. Вы поймете с опытом, какой метод лучше, и сможете варьировать методики в зависимости от используемых технологий. Главное – писать корректный CSS-код.

Источник