Свой css для opera

This post and this website contains affiliate links. See my disclosure about affiliate links.

how to use a single user CSS file in firefox, chrome and opera

Most modern web browsers support custom or user stylesheets which can be used to modify the look and feel of a web page before it is rendered. Usually there are multiple ways to set up a custom stylesheet (or user css file) in web browsers. Some browsers use extensions or addons while other just uses a simple css text file. Sometime you can use either or both.

If you use multiple browsers then maintaining a customized stylesheet for each browser can grow old pretty quickly. You have to remember to copy any and all of the changes you make, into each CSS file for each of the browsers. Also, there is a possibility of accidentally deleting the file if and when you purge the browser install directory or the profile folder.

Though it is possible to use custom CSS file in almost all of the modern web browsers, in this post we will deal with just the popular ones in Linux: Mozilla Firefox, Google Chrome and Opera. Each of these browsers may need the user style sheet to reside in a particular folder and have a specific name.

• Mozilla Firefox requires the file to be named as userContent.css and reside in a folder named chrome inside the profile : ~/.mozilla/firefox//chrome/userContent.css
• In Google Chrome this file is named Custom.css and it resides in the configuration folder named User Stylesheets: ~/.config/chromium/Default/User\ StyleSheets/Custom.css
• Opera does not impose any specific requirement about the file name and folder. It is configurable using the user interface and allows you to select any CSS file.

In spite of the differences in names and folders, it is possible to use a single CSS file across all of the browsers as all standard CSS rules work across all browsers. Browsers will also ignore rules that are not recognized. These are useful while using site specific CSS rules for Firefox using the @moz-document tags. If at all possible, refrain from using these browser specific features in CSS files which will make your life easier.

Источник

Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome

Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний «телодвижений». Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать. По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome. По мере обнаружения новых хаков, данный список будет дополняться.

CSS-хаки для браузера Opera

 html:first-child .style < background: #F00; >/* код валидный */ /* только для Opera < 9.5 */ 

 opera:-o-prefocus .style < background: #F00; >/* для Opera 9.5 - 12.16 */ /* вместо "opera" можно подставить любое слово/символ */ 

CSS-хак для браузера FireFox

CSS-хаки для браузера Internet Explorer 6

Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.

CSS-хаки для браузера Internet Explorer 7

 *:first-child+html .style < background: #F00; >/* код валидный */ 

CSS-хак для браузера Internet Explorer 8

CSS-хак для браузера Internet Explorer 9

CSS-хак для браузера Internet Explorer 10

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) < .style > 

CSS-хаки для браузера Safari

 body:last-child:not(:root:root) .style < background: #F00; >/* для Safari < 4.0 */ 

 html[xmlns*=""] body:last-child .style < background: #F00; >/* для Safari < 4.0 */ 

CSS-хаки для браузера Google Chrome

Смотрите также

• Меняем цвет фона выделенного текста с помощью CSS 36 комментариев
• 10 фиксов, решающих проблемы Internet Explorer 6 58 комментариев
• Internet Explorer 8 проходит тест Acid2 17 комментариев
• CSS-хаки vs Условные комментарии 15 комментариев

Комментарии (114)

Здравствуйте! У меня проблема, в IE не работает слайд-шоу на квери. Какой хак и куда добавить, чтобы браузер автоматически отображал слайд-шоу? Спасибо.

IE капризничает с JavaScript если в коде JavaScript есть ошибка (при условии, что во всех других браузерах работает). В окне IE слева внизу проверить индикатор, или воспользоваться Консоль ошибок в FF или Opera.

Верстаю новый шаблон для своего блога. Столкнулся с проблеммой использования/отображения в Google chorome CSS правила:

-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; / и так далее./ 

Верстаю разумеется в Firefox но основной акцент делаю на стабильном отображении в chrome. Я заметил, что у флектора на http://www.wordpressplugins.ru/ у меня в гугл хроме все стили типа

отображаются стабильно! Но если я в своём шаблоне применю это правило, то в хроме оно не работает 🙁 Этот пост уже довольно старый или я не разбираюсь в хаках, в общем может кто знает, что нужно сделать чтобы и у меня тоже эти правила работали в google chrome.

Источник

CSS хаки. Как задать CSS стили для разных браузеров

Приветствую вас, читатель моего блога!
Эта статья о том, как можно задать отдельные CSS стили для разных браузеров, используя CSS хаки. Я дам несколько примеров CSS хаков, и расскажу об их особенностях. А также покажу альтернативные способы решения проблемы задания отдельных CSS стилей для определённых браузеров.

Навигация по статье:

Что такое CSS хаки и для чего они нужны?

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

Для того чтобы решить данную проблему можно использовать специальные css хаки, благодаря которым можно прописать определённые стили только для определённого браузера. При этом все остальные браузеры эти стили просто проигнорируют.

CSS хак – это определённый селектор или группа селекторов стили для которых работают в одних браузерах и игнорируются другими.

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

То во всех браузерах для элемента с классом block применится сплошная красная рамка, толщиной в 2 пикселя.

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

Если мы пропишем данные правила следующим образом:

То во всех браузерах у элемента с классом block отобразится рамка толщиной в 2 пикселя, а в браузере Mozilla Firefox отобразится рамка в 1 пиксель и таким образом это решит проблему.

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

Применение CSS хаков целесообразно, в первую очередь, для исправления различных глюков самих браузеров.

CSS хаки для Internet Explorer

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

Я нашла несколько CSS хаков для этого браузера и ни один из них у меня не сработал!

Если хотите, можете сами попробовать. Вот эти CSS хаки:

Во всех этих вариантах вместо .block вы пишете название класса или ID того блока, для которого вы задаёте стили.
Вместо border:1px solid red; — пишете свои CSS стили

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

Для задания стилей только для браузера Internet Explorer лучше и надёжнее вместо CSS хаков использовать условные комментарии.

Код условных комментариев выглядит так:

Данный код рассчитан на все версии Internet Explorer

Если нам нужно чтобы стили применились только для определённой версии IE, то мы пишем:

Данные стили сработают для браузера Internet Explorer версии 7. Если вам нужно прописать стили для другой версии то вместо «7» вы ставит ту версию, которая нужна.

CSS хак для Mozila Firefox

Основной отличительной особенностью данного браузера является то, что по другому отображает шрифты из за чего ширина блоков может немного меняться, а текст перескакивать в две строки или не помещаться в определённый блок.
Для того чтобы задать стили только для Mozila Firefox в CSS файл пишем следующий код:

Вместо .block пишем класс или ID элемента, для которого нужно задать стиль.

CSS хак для GoogleChrome

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

CSS хаки для Opera

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

Для версии Opera 10 можно попробовать:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0)

Для более ранних версий есть следующие варианты:
Opera 9.2 и младше

Ещё вариант:

Есть ещё такой хак:

Но его видит так же Mozilla последних версий и Chrome, поэтому не советую его использовать!

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

На что обратить внимание при использовании CSS хаков.

CSS хаки конечно часто решают проблему с одинаковым отображением элементов и стилей в разных браузерах, но это решение проблемы – не самое надёжное, так как вы не можете быть уверенными на 100% что данный CSS хак будет работать в новых версиях браузеров, кроме того если вы пишете CSS хак для Firefox, к примеру, то вполне вероятно что когда выйдет новая версия Chrome или Opera то они тоже будут видеть и отображать этот хак.

Так что используйте их только в крайних случаях и с осторожностью.

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

Более подробно об этом я напишу в моей следующей статье.

Надеюсь, что данная статья была для вас полезной и теперь вам будет немного проще подогнать свою вёрстку под разные браузеры. Желаю вам успешной вёрстки и хорошего настроения 🙂

С уважением Юлия Гусарь

Источник

Подключить свой css для Opera

Добрый день. Есть проблемка. Сделал над хедером полоску дополнительную, Google, Safari, FF всё отлично, в Опере она торчит на половину, другая половина вне экрана, хочу создать ещё один CSS отдельно для Opera и там спустить её немножко. Использую WordPress. Подскажите как сделать, буду очень благодарен

Ссылка на комментарий

Поделиться на других сайтах

9 ответов на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

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

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник