Почему не работает css

Не применяются css

css

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

Надпись inspector-stylesheet говорит о том, что данное правило добавлено не в css файлах, а вручную через инспектор. Если через инспектор необходимые изменения внешнего вида корректируемого элемента были достигнуты, то далее необходимо эти изменения внести в файл стилей сайта.

Если неизвестно из какого файла берутся стили сайта, то это можно посмотреть в исходном коде страницы (в большинстве браузеров вызывается через ctrl+u):

css2

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

Далее необходимо внести изменения в css файл, обычно новые стили с соответствующими комментариями добавляются последними строками в файл.

Но иногда изменения стилей не применяются, это может происходить по нескольким причинам:

    Изменения на самом деле применились,но результата не видно из-за не обновленного кеша веб браузера. Всегда после изменения стилей необходимо делать очистку кеша через ctrl+F5.

У меня на мобильном телефона в веб браузере chrome часто бывает такой глюк: даже после очистки кеша сайт отображается неправильно. Берешь телефон друга, открываешь на нем сайт — там изменения применены. А на твоем телефоне, даже после очистки истории — нет.Вообще для проверки изменения в стилях удобно использовать режим инкогнито, в нем браузер не сохраняет кешированные версии сайта у себя в памяти, а все время делает загрузку с веб сервера.

В свежих версиях данных плагинов такой проблемы нет, так как после изменения файла стилей плагин заново генерирует свой кеш.

Почему не работает css

Доброе время суток .

Моя проблема заключается вот в чём: я хотела привязать к html-странице файл css. Вроде тег <link rel . набран правильно. Проверяла не раз. Когда я делаю стиль внутренним, всё работало, значит, ошибка в этом теге. Но чёрт возьми, я его много раз проверяла и её нет. Я никак не могу понять, в чём дело.
Вот код:

CONTENT="text/html; charset=utf-8">
<TITLE>Справочник по HTML и CSS</TITLE>
</HEAD>
<BODY>
<P><A HREF="css_index.htm">CSS</A> |
<A HREF="samples_index.htm">Примеры</A> |
<A HREF="about.htm">О разработчиках</A></P>
<H1>Справочник по HTML и CSS</H1>
<P>Приветствуем на нашем Web-сайте всех, кто

занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех

интернет-технологиях,
применяемых при создании Web-страниц. А именно, о

языках <DFN>HTML</DFN> и
<DFN>CSS</DFN>.</P>
<hr>
<P>Русская Википедия определяет термин HTML

так:</P>
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language —

Почему [функция CSS] не работает в [браузере], но работает в других?

Я попытался с помощью transition на Firefox 15, и он не работал, хотя он работал на других версиях Firefox и других браузерах, таких как Chrome и Safari.

когда я просматриваю свойства с помощью инспектора Firefox transition зачеркнут и дает ошибку "недопустимое значение свойства". MDN и caniuse скажите, что он поддерживается в Firefox 4 и выше!

как иногда свойства, такие как transition и animation работа в некоторые браузеры и недействительны в других?

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

1 ответов

хотя это не всегда так, одна из наиболее распространенных причин, почему свойство, как transition или animation работает в некоторых браузерах, а не в других из-за префиксы.

что такое префиксы поставщика?

во время появления версии 4 Firefox спецификация модуля перехода CSS была рабочим проектом. Прежде чем спецификация будет завершена (на практике, это когда она достигает рекомендации кандидата), браузер поставщики добавляют префиксы к свойствам, значениям и @ — правилам для предотвращения проблем совместимости в случае изменения спецификации.

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

наиболее распространенными являются -moz- (Mozilla Firefox), -webkit- (Chrome, Safari и т. д.), и -ms- (Microsoft Internet Explorer), но больше.

когда мне нужно их использовать?

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

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

переход

свойство без префиксов иногда имеет префикс эквиваленты, такие как -webkit-transition .

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

внимание: -ms- префикс существует для transition , однако он был реализован только предрелизными версиями IE10, которые больше не функционируют, и поэтому никогда не нужны. Он реализован в IE10 RTM и новее.

преобразование

анимации

анимации должны иметь свойство префикс и соответствующие ключевые кадры с префиксом, например:

Flexbox

значения также могут иметь префикс, как в случае flexbox. Примечание: для максимальной совместимости браузера, Flexbox-специфические свойства, такие как ordinal-group , flex-flow , flex-direction , order , box-orient , etc. необходимо иметь префикс в некоторых браузерах к следующий:

градиенты

посмотреть CSS градиенты на CSS-трюки для получения дополнительной информации.

обратите внимание, что left и to right представляют одно и то же направление, слева направо, и поэтому left и to left точка напротив способами. См.ответ кое-какая информация.

Border-radius (не требуется в большинстве дела)

Box shadow (в большинстве случаев не требуется)

как они могут быть реализованы с помощью JavaScript?

для доступа к префиксным атрибутам и событиям в JavaScript используйте camelCase эквивалент префикса CSS. Это верно для прослушивателей событий, таких как foo.addEventListener(‘webkitAnimationIteration’, bar ) а ( foo будучи объектом DOM, как document.getElementsById(‘foo’) ).

инструменты префикса

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *