Полезная информация

Не получается решить проблему на форуме? Служба технической поддержки Mozilla Россия — support@mozilla-russia.org.

№131-03-2011 21:07:10

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2540
UA: Firefox 4.2

Уроки стилистики (CSS)

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

1. Как с ним работать?
Надо уметь всего 3 вещи: делать диагностику уже имеющегося, знать где посмотреть документацию и знать как писать собственные стили.

2. Как делать диагностику? Какими инструментами её проводить, чтобы узнать все параметры какого-то объекта?
Для удобной диагностики нам понадобятся 2 инструмента:http://mozilla-russia.ucoz.ru/Uroki_CSS/domi16.pngDOMi и кнопка http://mozilla-russia.ucoz.ru/Uroki_CSS/attrinsp16.pngAttributes Inspector для дополнения http://mozilla-russia.ucoz.ru/Uroki_CSS/cb16.pngCustom Buttons
После того, как вы установили всё это и перетащили кнопку http://mozilla-russia.ucoz.ru/Uroki_CSS/attrinsp16.png на любую панель - нажимаете её и наводите на любой элемент интерфейса браузера или же страницы.
Тут же у курсора появляется подсказка, перечисляющая основную (не всю) информацию о просматриваемом объекте. Если хотим получить всю информацию об объекте, то зажимаем CTRL и делаем клик мышкой - после этого откроется окно http://mozilla-russia.ucoz.ru/Uroki_CSS/domi16.png в котором в левой части будет DOM-дерево (структура связей между всеми элементами, т.е. кто кому родителем приходится), а в правой части показан 1 тип информации по этому объекту. Типы информации об объекте бывают разными и можно переключаться между ними:
http://mozilla-russia.ucoz.ru/Uroki_CSS/domi_in_work.png
Нас больше всего будут интересовать CSS Rules, Computed Style и DOM Node.
DOM Node - нужен для просмотра некоторых параметров объектов интерфейса, например апптабы имеют свойство [pinned="true"], а у обычных табов его нет.
CSS Rules - показывает какие файлы стилей, а так же какие именно правила из этих файлов применяются к просматриваемому вами объекту.
Computed Style - дословно переводится как "рассчитанный стиль", т.е. он показывает сразу ВСЕ свойства и их значения для просматриваемого объекта.
Некоторые из свойств вы могли не задавать напрямую, они могут появиться из-за других свойств - например у элемента, у которого не задана ширина - по умолчанию ширина (т.е. свойство width) будет auto.

3. А где посмотреть описание всяких свойств, которые я бы хотел изменить?
htmlbook - на русском, но там перечислены только основные свойства, некоторых - нет. Для новичков будет удобен раздел CSS по категориям, чтобы быстро изучить какие группы свойств к чему относятся и что позволяют сделать.
MDC - на английском, но это наиболее полный источник по всему, что поддерживается лисой из CSS: даже то, что ещё не вошло в w3 стандарт о CSS.

4. А куда и как писать собственный стиль?
Есть два варианта: 1. удобный, через аддоны    2. чуть менее удобный, но без аддонов.
1. Для удобной работы со стилями ставим http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.pngStylish (и для пущего удобства (но не обязательно) Stylish-Custom). Открываем Stylish и кликаем по кнопке "Создать новый стиль". У
2. В папке профиля, лезем в папку chrome и там изменяем (а если их нет - то сначала создаём) файлы userContent.css (если хотим написать стиль для какого-то сайта) или userChrome.css (если хотим написать стиль меняющий внешний вид браузера).

5. А с чего начинать стиль и что вообще в нём должно быть?
Стиль должен состоять из 2-ух вещей (1-ая из которых не совсем обязательная, но во избежание ошибок - лучше её всегда прописывать): из области применения и из правил.
А. Стиль должен начинаться с области применения. Существует 3 типа областей применения: XUL - для интерфейса браузера, XHTML - для всех сайтов сразу и URL - для конкретного сайта. У URL есть 3 подвида (по префиксу, по домену и для конкретной страницы).

Вот как они выглядят (это нужно тем, кто будет писать стили вручную через userChrome.css или userContent.css
XUL

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
Здесь идут правила.

XHTML

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);
Здесь идут правила.

URL по префиксу

Выделить код

Код:

@-moz-document url-prefix(http://kakoi-to prefix), url-prefix(http://haha){
Здесь идут правила.
}

Эту область применения не обязательно перемещать в начало документа.
В этом примере я создал область применения для 2-ух префиксов. Просто чтобы показать, что так тоже можно.

URL по домену

Выделить код

Код:

@-moz-document domain(vkontrakte.ru){
Здесь идут правила.
}

Эту область применения не обязательно перемещать в начало документа.

Конкретный URL

Выделить код

Код:

@-moz-document url(http://vkontrakte.ru/imenno/i/tolko/eta/stranichka.html){
Здесь идут правила.
}

Эту область применения не обязательно перемещать в начало документа.

URLы по RegEx шаблону

Выделить код

Код:

@-moz-document regexp('https?://(?!(www\\.google\\.com|bugzilla\\.mozilla\\.org)).*') {
Здесь идут правила.
}

Эту область применения не обязательно перемещать в начало документа.
До тех пор, пока не исправлен баг 34981 - в [firefox] в принципе нет поддержки правил-исключений для отдельный доменов/сайтов/страниц. Но можно составить такой RegEx шаблон, под который будут подпадать все домены/сайты/страницы, кроме перечисленных.


Пользователям http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png запоминать как они пишутся - не надо, надо лишь знать применение каждого из них, т.к. в http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png если нажать "Insert", то в выпадающем меню первые 3 пункта и будут кнопки, по нажатию на которые автоматически вставится нужный текст. Только помните, что его надо поместить в самый верх стиля.

Б. После области применения идут сами правила.
Правило состоит из 4-ёх обязательный частей, 1-ой необязательной (комментарии) и разделителей:
Селектор - это то, к какому(им) элементу(ам) будет применено правило.
Свойство - это тот параметр, то свойство у элемента, которое мы будем менять.
Значение - это значение(ия), которые мы присвоим указанному свойству.
Важность - это "булевый" атрибут, который означает "важность" (приоритетность) применения правила по отношению к другим правилам. Важность бывает обычная: ; и высокая: !important;. В основном, правило сразу пишут выставляя везде высокую важность, чтобы быть уверенным, что оно точно сработает, а не будет перебито другим правилом, имеющим больший приоритет. Перед закрывающей фигурной скобкой не обязательно ставить символ ;, даже если он - часть высокой важности. Подробнее о приоритетности и её специфике.
Комментарии - это не обязательная часть кода. Комментарии в CSS заключаются внутри /*  <- таких тэгов -> */ , они могут быть многострочными и могут быть вписаны в любое место (но нельзя ими дробить слова в коде).
Разделители - часть присущая синтаксису кода, синтаксис CSS не похож на синтаксис C++ или HTML. В CSS такой синтаксис:
селектор_1, селектор_2 { свойство_1: значение важность
свойство_2: значение важность } /* комментарий */
например вот так:

Выделить код

Код:

#addon-bar { background: green !important; } /* сделаем аддон-бар зелёным */
.tabbrowser-tab { text-shadow: 0 0 1px white; } /* правило с малой важностью, которое добавляет белую тень к тексту у вкладок, но не срабатывает из-за низкой важности */
.tabbrowser-tab { text-shadow: 0 0 1px red !important; } /* правило с высокой важностью, которое добавляет красную тень к тексту у вкладок */


Некоторые свойства являются наследуемыми - т.е. если вы выставляете color: green для какого-то родительского элемента - то если не действует никаких "перебивающих" это свойство других правил, то все его дочерние элементы унаследуют color: green. Узнать какой-стиль перебивает ваш - можно в http://mozilla-russia.ucoz.ru/Uroki_CSS/domi.png.

6. Откуда я узнаю, что мне надо указать в качестве селектора(ов)?
При составлении любого правила - нам всегда нужно определить, что мы укажем в нём в качестве селектора. Указывая селектор - мы всегда ищем баланс между слишком общим и слишком узким указанием: если указать селектор слишком общим, то мы своим правилом можем задеть и то, что мы не хотели задевать, а если селектор указать слишком узким, то нам, возможно, придётся перечислять слишком много объектов вручную, и у нас не будет гарантии, что когда появится новый элемент, то он тоже подпадёт под правило составленное нами.
Существуют:
  1. Базовые селекторы
    1. Типовые селекторы - соответствуют названиям узлов в DOM-дереве, т.е. HTML тэгам.
      Типовые селекторы в CSS-стилях записываются так: nodeName (без всяких знаков препинания).
    2. Классовые селекторы - соответствуют элементам по имени их атрибута "класс". Атрибут "класс" у HTML-элемента может отсутствовать.
      Классовые селекторы в CSS-стилях записываются так: .classname. Эту же запись можно представить и через Атрибутивный селектор, вот так: [class~=classname] (обратите внимание на нестрогое совпадение в соответствии с правилами составления Атрибутивных селекторов), но в таком виде правило будет медленней работать.
    3. ID селекторы - соответствуют элементам по имени их атрибута "ID". Атрибут "ID" у HTML-элемента может отсутствовать.
      ID селекторы в CSS-стилях записываются так: #id_value. Эту же запись можно представить и через Атрибутивный селектор, вот так: [id=id_value] (обратите внимание на строгое совпадение в соответствии с правилами составления Атрибутивных селекторов), но в таком виде правило будет медленней работать.
    4. Универсальные селекторы - в CSS указателем Универсальных селекторов является знак *, который означает, что под правило подпадёт элемент любого типа. При употреблении с простыми селекторами - его можно опустить: так *.warning соответствует тому же, что и .warning.
      В CSS 3 символ "*" может использоваться в сочетании с областью имён:
      • lalala|* - соответствует всем элементам из области имён lalala
      • *|* - соответствует всем элементам.
      • |* - соответствует всем элементам с не заявленной областью имён.

    5. Атрибутивные селекторы - соответствуют элементам через указание на какой-то атрибута или значение атрибута.
      Правила составления Атрибутивных селекторов
      • [attr] - соответствует элементу с атрибутом по имени attr.
      • [attr=value] - соответствует элементу с атрибутом по имени attr с точным значением этого атрибута value.
      • [attr~=value] - соответствует элементу с атрибутом по имени attr с любым разделённым пробелами списком слов, одно из которых точно совпадает с value.
      • [attr|=value] - соответствует элементу с атрибутом по имени attr с любым разделённым дефисами списком слов, одно из которых точно совпадает с value.
      • [attr^=value] - соответствует элементу с атрибутом по имени attr с такими значениями этого атрибута, которые начинаются с value.
      • [attr$=value]  - соответствует элементу с атрибутом по имени attr с такими значениями этого атрибута, которые заканчиваются на value.
      • [attr*=value]  - соответствует элементу с атрибутом по имени attr с такими значениями этого атрибута, которые содержат в себе хотя бы одно такое сочетание символов: value.

  2. Комбинаторы
    1. Селектор следующего элемента - в CSS указывается как element1 + element2 и указывает на такой element2, который в DOM-структуре идёт сразу после element1 и имеет с ним общий родительский элемент.
    2. Селектор соседского элемента - в CSS указывается как element1 ~ element2 и указывает на такой element2, который идёт после (не обязательно сразу после) element1 и имеет с ним общий родительский элемент.
    3. Селектор дочернего элемента - в CSS указывается как element1 > element2 и указывает на такой element2, у которого родительским элементом является element1.
    4. Селектор потомка - в CSS указывается как element1 element2 и указывает на такой element2, который является потомком любого уровня для element1.

  3. Псевдо-классы - добавляются к селекторам для указания на какое-то их особое положение.
    Употребление псевдо-классов:
    селектор:псевдо-класс {
      свойство: значение; }
    Список всех псевдо-классов
    • Относящиеся к ссылкам и другим элементам с которыми взаимодействует пользователь:
      :link - ссылка.
      :visited - посещённая ссылка.
      :active - активная ссылка (в момент клика).
      :hover - объект под курсором.
      :focus - объект в фокусе (фокус можно переключать между элементами, например, нажимая Tab, только узнать какой сейчас элемент в фокусе - не всегда легко. После клика по какой-нибудь кнопке - фокус остаётся на ней).
    • Языковой псевдо-класс: :lang().
    • Отрицательный псевдо-класс: :not().
    • Псевдо-классы относящиеся к страницам (обычно, при распечатке и предпросмотре распечатываемого):
      :first - первая.
      :left - левая.
      :right - правая.
    • Псевдо-классы DOM-структуры:
      :root - корневой элемент.
      :nth-child(h) - h*-ый по счёту дочерний элемент.
      :nth-last-child(h) - h*-ый по счёту с конца дочерний элемент.
      :nth-of-type(h) - h*-ый по счёту одноуровневый элемент.
      :nth-last-of-type(h) - h*-ый по счёту с конца одноуровневый элемент.
      :first-child - первый дочерний элемент.
      :last-child - последний дочерний элемент.
      :only-child - единственный дочерний элемент.
      :first-of-type - первый одноуровневый элемент.
      :last-of-type - последний одноуровневый элемент.
      :only-of-type - единственный одноуровневый элемент.
      :empty - элемент не имеющий дочерних элементов.
    • Псевдо-класс места назначения: :target.
    • Псевдо-классы состояний элементов пользовательского интерфейса:
      :checked - "отмеченный" - одно из состояний checkbox или radiobutton.
      :enabled - "разрешённое" - одно из состояний поля input.
      :default - "выбранный по умолчанию" - для любого элемента пользовательского интерфейса.
      :disabled - "запрещённое" - одно из состояний поля input.
      :indeterminate - "неопределённое" - одно из состояний поля checkbox.
      :invalid - "неверно заполненное" - одно из состояний поля input.
      :optional - "необязательное для заполнения" одно из состояний поля input.
      :required - "обязательное для заполнения" одно из состояний поля input.
      :valid - "верно заполненное" - одно из состояний поля input.
    • Экспериментальные псевдо-классы из проекта CSS 4 (работают не все, не до конца и вероятно только в [nightly]):
      :dir(), :local-link, :matches(), :nth-match(), :nth-last-match(), :column(), :nth-column, :nth-last-column, :scope, :current, :past, :future, :in-range, :out-of-range, :read-only, :read-write и :-moz-any()

    * - значения h могут задаваться формулой an+b (где a и b - целые числа (например, 2n+1, -n+ 6 или 10n) или принимать значения odd (нечётные) и even (чётные).

  4. Псевдо-элементы - похожи на псевдо-классы, только в отличие от них используются не для описания каких-то особых состояний элемента, а для стилизации каких-то конкретный частей документа или элемента. Некоторые из них создают новый элемент.
    • :after или ::after - псевдо-элемент, создающий новый элемент, как дочерний (и располагающийся в конце) для выбранного.
    • :before или ::before - псевдо-элемент, создающий новый элемент, как дочерний (и располагающийся в начале) для выбранного.
    • :first-letter или ::first-letter - псевдо-элемент, соответствующий первой букве.
    • :first-line или ::first-line - псевдо-элемент, соответствующий первой строке.
    • ::selection - псевдо-элемент, соответствующий выделению (когда вы выделяете какой-то кусок текста или картинку).С помощью него можно менять цвет фона выделения.
    • ::-moz-progress-bar - специфичный только для Gecko-движка псевдо-элемент, соответствующий полосе прогресса.


  5. @-правила:

    • @charset - позволяет указать на кодировку, используемую в стиле.
    • @font-face - позволяет подгружать новые шрифты.
    • @import - позволяет импортировать в стиль правила из другого стиля, расположенного в отдельном файле.
    • @keyframes - позволяет задавать "этапы" при использовании любой CSS-анимации.
    • @media - позволяет создавать стили с зависимостями от железа и софта.
    • @namespace - "область имён" - задаёт область применения для стиля.


7. Мне уже не терпится что-нибудь изменить! Хочется вот убрать все картинки из этого сообщения (уж больно они раздражают!), а весь красненький текст, например, заставить мигать!
Хорошо. Раз раздражают - их надо все убрать, вот только как это сделать? - Надо всё делать по порядку!
  1. Открываем http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png и жмём "создать новый стиль". Появилось окошко, в которое мы должны вписать как мы назовём стиль (чисто для себя, чтоб не путаться) и место для кода.
  2. Надо определиться с областью применения. Т.к. речь сейчас идёт конкретно об этом форуме (допустим, что мы целиком во всех комментариях хотим убрать картинки), то мы выбираем URL по домену и вписываем как домен
    forum.mozilla.russia.org и у нас получается такой код:

    Выделить код

    Код:

    @-moz-document domain(forum.mozilla-russia.org){
    }

  3. Чтобы определить, что мы укажем в качестве селектора для нашего правила - кликаем на http://mozilla-russia.ucoz.ru/Uroki_CSS/attrinsp.png и по очереди наводим на несколько картиночек в тексте, пытаясь выявить у них сходства между собой, но такие, чтобы они не присутствовали у других элементов.
  4. Мы видим, что у всех у них общий class = postimg поэтому как селектор мы будем использовать либо [class="postimg"] (либо более коротко .postimg - смотрите "Базовые селекторы" из п.6.)
  5. Из списка селекторов мы должны посмотреть какое свойство отвечает за показ элемента - и мы находим свойство display.
  6. Из списка возможных значений для этого свойства мы находим нужное - none
  7. Выставляем высокую важность (хоть в нашем случае это и не обязательно) чтобы быть уверенными в том, что правило точно сработает и не будет "перебито" каким-то другим, у которого был бы приоритет выше этого.
    И получаем готовый стиль который скроет нам все картинки в комментариях на всём этом форуме:

    Выделить код

    Код:

    @-moz-document domain(forum.mozilla-russia.org){
    .postimg { display: none !important; }
    }

  8. Теперь займёмся красненьким текстом. Кликаем на http://mozilla-russia.ucoz.ru/Uroki_CSS/attrinsp.png и ищем сходства - и мы тоже видим, что он везде идёт как SPAN и stlye = color: red
  9. Зажимаем CTRL и кликаем по нему - откроется окно http://mozilla-russia.ucoz.ru/Uroki_CSS/domi.png. Если у вас нет http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png, то вам придётся переписать оттуда нужные вам свойства вручную, а если у вас установлен http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png то в левой части окна мы на выделенный элемент кликаем правой кнопкой мыши -> "Copy Selector", где в выпадающем меню выбираем 2ой пункт, т.к. он затрагивает только и только красный SPAN. Это и будет нашим селектором.

  10. Переходим к свойствам. Ищем что-то, что позволило бы тексту мигать. Это умеет свойство text-decoration если ему выставить значение blink.


Собираем 1-ое и 2-ое правило вместе и получаем готовый стиль:

Выделить код

Код:

@-moz-document domain(forum.mozilla-russia.org){
.postimg { display: none !important; }
SPAN[style="color: red"] { text-decoration: blink !important; }
}

8. А у меня стиль сделан так, что он ссылается на некоторые картинки (идёт как фон к какому-нибудь элементу или, например, у кнопочки значок меняет). Очень неудобно стилем делиться - приходится с ним отдельно картинки тоже высылать, можно ли этого избежать?
Можно перекодировать изображения в текстовый вид, используя base64 кодирование. Если стоит http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png, то в нём уже встроен этот кодировщик. Если http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png не установлен, то можно использовать, например какие-нибудь онлайн кодировщики.
Рассмотрим применение этой функции на примере. Попробуем заменить курсор при наведении на поля "код" на этом форуме на иконку [firefox]
1. Прежде всего, нам понадобится само изображение, и оно у нас уже есть на этом форуме. Нужно сохранить эту иконку к себе на компьютер.
Хинт для [windows]: в принципе, если иконка уже находится где-то в интернете и нам она доступна - то можно и не делать этого, а просто скопировать её адрес в буфер обмена и потом вставить этот адрес как путь к файлу. В http://s.ubuntu.ru/o/favicon.ico у меня такой трюк не сработал.
2. Составляем правило, которое делало бы фон у полей "код" в сообщениях на этом форуме из иконок [firefox]. Как узнать как этот элемент называется -  мы знаем из ответа на предыдущий вопрос + используем псевдо-класс (смотрите "Псевдо-классы" из п.6).

Выделить код

Код:

.codebox:hover { cursor: url("а здесь должен быть base64 код картинки"),pointer !important; }

3. Кодируем картинку используя онлайн-кодировщики или же через http://mozilla-russia.ucoz.ru/Uroki_CSS/stylish16.png: Insert (Вставить) > Data URI... (Данные в формате URI...) > Указываем путь к файлу.
Вставляем этот код в нужное место в нашем правиле и получаем целиком готовое правило:

Выделить код

Код:

.codebox:hover { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAADNElEQVQ4jXWTTWxTBQDHf++jH2/9btetWzM351DCmjoVaMYWEkICBxPQGE9wkLCTJ2LUSIQEEsSD0cQYL5x2MzHRg06iiTgnAQNkjrHJptu6bt1bu3Yb3dr3Xl8/3vMkB8Tf+Zf/6f8TeBoHPuvvez52IqjVzxu1WqPU4vpIHS/8wNa780+qAoBtXxKZvCQJp76Idhzr+Xhwf8+bLzwTVBI9YSrVOotLq+RujWnNvya+0qbUC98tz278OyADVC+PHp41Dpz17ZOTAy93Jl+PTKE+CpAPDKObJpWmyN6o7jl1KDMSPWcNlv+Inek4l78HIALcv7F2sMeln/558Hryk8336b15hblNhcWiSTq3i8cbYoZh3vqyj3SD/tBwbezh6CuvAkgAI0P+s16P9pJXy6JoOUqru3RuFajZJqp7D7sljUoNdH+KmWmZE+23PEJ7l/vT0ezX8t23n+sKKeZrDapYtoQoQndvEKNhMrtcZK2SYXVpgXKxQH9iEEmJYSt7cQXmXzx/lIhc2i7vj8SEkC0LCAIYpkzDH+bb7QRZ32Fc9SYVVaVcWCdTk2mPr6P0OiHX+mwsspWSV1ZqvrhXwu9xsLFi8vftIt90Jljo7aclWKchQcDhpbS9SaGQ52RKQ9BmsJpRFow2p5xZNo2BuINApxOqdXqiFu8ks/ziekCn6yZ9cYEraSeZQhEl3MrwUBB2quhyd2VydXFFHssbt4dzdj7e74lFuhTElhqmnuFg+hq6KHPtuod76QBi08/p1A7hyBJ4h1Bz0czv078tidOgPpirj+kZA8knYrUpuNta2GqNcTWdZKxwBLcc4vKxMh+mpnAaPthjMXFj4kdgVwBIQuK9Lmk8dSjSKsUd2M0yik9Ct/0UjTBe2aBVKEGoSMdIN3fHVfXkGfN4vsKfEsAGFGzD3g6r+nHnmiSXs02qmgPBbBIQyzgoY/lLtB1t8HByR7t4tfHBVJafHh8JYN7iftFgXdiqDngqzaCQszDXG9QemdhiFcMDE3ccCxc+Fy7+mrZGAetxTE+w74jMGwlFToUcQtRSaJY8Qm5G587EWu17YO4/Nf4PbqAFsAENqD1N+gd+2GVdUlJlcQAAAABJRU5ErkJggg=="),pointer !important; }

Ещё пример:
Вставляем иконку перед каждой ссылкой:

Выделить код

Код:

:moz-any-link:before { content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVQ4ja1TwRGAIAwLHgu4CoO4Cit0BVZhEFdxBPyIFqzUnubDHbQhpMHhAIEKFBDI9XuOHZa4xcfmNCeRZNJu5VjW5abURCCRmAhyyMghA7g882+be3+qJ17atKB5QnWYr9x1aYyqBwQqUqOFwI1C9r+CUTFTdNY0UdbUSGTNGEd/oUcduTnKPT4HaQfbHDGRAD/a3QAAAABJRU5ErkJggg==") !important; }

9. Можно ли написать стиль с зависимостями от устройства или от операционной системы?
Да, можно. Всё это уже является частью стандарта CSS, т.е. такой стиль будет правильно обрабатываться и любым другим софтом, понимающим CSS 3. C помощью @media или соответствующих псевдо-классов можно составить стиль так, что то, для чего он написан - будет выглядеть по-разному в зависимости от устройства, операционной системы и темы оформления операционной системы, на котором у вас запущена программа, в которой используется этот стиль.
Первый тип зависимостей - это привязки к железу: помимо типа устройства (например: проектор, мобильник, компьютер, телевизор), есть привязки и к параметрам его экрана (монохромный ли? какой имеет dpi? сколько точек по x и по y? сколько цветов умеет показывать?).
Второй тип зависимостей - это привязки к софту. Пока они не часть стандарта и понимает их только Gecko движок. С помощью них можно в стиле сделать привязки к операционной системе и её теме оформления. Часть зависимостей такого типа можно указать и через соответствующий псевдо-класс
Рассмотрим на примере, где я использовал не только простые связи, но и систему взаимосвязей.

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@media -moz-mac-graphite-theme,
-moz-maemo-classic,
screen and (-moz-touch-enabled:0) and (-moz-windows-classic:0) and (min-device-height:480px)
{  #nav-bar
   {  display: none !important; } }

Стиль должен скрывать Панель навигации, если выполняется 1 из 3 перечисленных условий:

  • В случае если у вас ОС MacOS и выбрана тема "graphite".
    Это условие задано через "-moz-mac-graphite-theme".
  • В случае если у вас ОС Maemo (обычно она используется на смартфонах).
    Это условие задано через "-moz-maemo-classic".
  • В случае если у выполняются сразу 4 условия:
    Это условие задано через ".. and .. and .. and ..".

    • Вы используете монитор (т.е. не проектор и не телевизор).
      Это условие задано через "screen".
    • у вас отключён touch интерфейс (т.е. когда вы трогаете экран руками - ничего не кликается).
      Это условие задано через "(-moz-touch-enabled:0)".
    • у вас Windows, но тема оформления не "классическая", а, например, aero.
      Это условие задано через "(-moz-windows-classic:0)".
    • у вас высота экрана не меньше 480 пикселей.
      Это условие  задано через "(min-device-height:480px)".

Кстати, почти все использованные условия (кроме screen и min-device-height) есть и в виде псевдоклассов, т.е. этот же стиль можно было составить и так:

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#nav-bar:-moz-system-metric(mac-graphite-theme),
#nav-bar:-moz-system-metric(maemo-classic)
{  display: none }
@media screen and (min-device-height:480px)
{  #nav-bar:not(:-moz-system-metric(touch-enabled)):not(:-moz-system-metric(windows-classic))
   {  display: none } }

10. Можно ли написать стиль с зависимостью от текущего времени?
Да, но только если у вас установлен Stylish.

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Сделать фон "Навигационной панели" красным в период с 14 до 16 часов */
#main-window[stylish-hour="14"] #nav-bar, #main-window[stylish-hour="15"] #nav-bar {
   background-color: red !important }

Использование такой привязки поможет вам написать стиль для чего-нибудь таким образом, что это что-то будет меняться в зависимости от текущего времени: можно сделать так, чтобы скин браузера был светлым и сверкал днём, а ближе к вечеру темнел бы или переливался разными цветами. Причём эти переливы можно сделать более или менее плавными при использовании CSS Transitions.

11. Можно ли заставить какой-то кликабельный элемент игнорировать клики по нему?
Да, с помощью pointer-events: none.
Этот стиль сделает так, что клики по кнопке закрытия Панели поиска (открываемой по CTRL+F) перестанут действовать:

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.findbar-closebutton {
    pointer-events: none }

12. Я хочу стилем заменить какой-нибудь элемент на странице другим, но сайт не мой и его код я править не могу. Это можно сделать?
Да, можно, но сначала прочитайте статью "Псевдо-элементы".

  1. Сначала надо скрыть сам объект: хочется использовать "display: none" но тогда не будут отображаться и все псевдо-элементы выбранного объекта, поэтому используем "visibility: collapse".
  2. Используем псевдо-элемент :before (если бы мы использовали :after, то он появился не на месте скрытого элемента, а после, и тогда его пришлось бы сдвигать (через указание относительных путей, что не надёжно и поэтому проще этого избежать)).
  3. Задаём содержимое псевдо-элемента через свойство content. Кстати, картинки я вставлял через ссылки на размещённые на других сайтах, но можно вставить и base64 код картинки, если не хочется использовать ссылку (ведь ссылка может и умереть, или измениться картинка по ней).
  4. Выставляем "visibility: visible" для псевдо-элемента, т.к. свойство visibility по умолчанию наследуемое, то псевдо-элемент унаследует его от своего родителя - самого элемента, который мы тока что сами и скрыли используя visible.

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

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("forum.mozilla-russia.org") {
.inbox>A[href="index.php"] {
    visibility: collapse; }
.inbox>A[href="index.php"]:before {
    content: url(http://mozcom-cdn.mozilla.net/img/covehead/template/title.png) "<< откуда это взялось? >>" url(http://mozcom-cdn.mozilla.net/img/covehead/template/title.png);
    visibility: visible;
    text-decoration: blink; } }

13. У меня мои стили работают, а будут ли они работать и иметь такой же эффект и в других браузерах?
Не факт, что будут. Это зависит от того, поддерживают ли (и как поддерживают) другие браузеры те селекторы, свойства и (их значения), которые поддерживает ваш браузер. Несмотря на то, что многие свойства из стандарта CSS 3 уже поддерживаются многими браузерами, сам стандарт CSS 3 - ещё не принят и не сформулирован окончательно.

Отредактировано iDev.Pi (19-09-2013 00:38:12)

Отсутствует

 

№202-12-2011 16:28:54

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2540
UA: Nightly 11.0

Re: Уроки стилистики (CSS)

Добавил пункт 6, в котором подробно описал выбор селекторов при составлении правил, с упоминанием базовых селекторов, комбинаторов, псевдо-классов, псевдо-элементов и @-правил.
+ мелкие добавления и правки в остальных пунктах.
Сообщение №2 - зарезервировано.

Отсутствует

 

№324-09-2012 09:33:58

okkamas_knife
We are the Borg.       Resistance is futile.
 
Группа: Extensions
Зарегистрирован: 21-10-2009
Сообщений: 6557
UA: Seamonkey 2.12

Re: Уроки стилистики (CSS)

iDev.Pi
я думаю стоит добавить примеров в виде конкретных простых действий с пояснениями
хотябы для страниц
типа такого

скрытый текст
задача: поменять текст "Не разрешено:" на "Правила загрузки:" на страничке http://forum.mozilla-russia.org/upload.php
1 открываем страничку, смотрим исходный код
видим

Выделить код

Код:

<p><b>Не разрешено:</b><br>

и также видим что тэг b больше не встречается, значит для указания элемента будем использовать его

Выделить код

Код:

@-moz-document url-prefix(http://forum.mozilla-russia.org/upload.php){ // указываем адрес где будет применяться правило
B{visibility: collapse} // В - тэг который используем для указания на элемент, этой строкой скрываем его
B:before{content: "Правила загрузки:"; //  вставляем перед указанным элементом свой контент
visibility: visible !important;// т.к. вставленный контент наследует видимость от основного то указываем чтоб он был видимым 
}
}

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


SeaMonkey Portable все версии

Отсутствует

 

№424-09-2012 13:12:26

Lain_13
вы не существуете
 
Группа: Extensions
Откуда: Волшебная Страна
Зарегистрирован: 26-04-2006
Сообщений: 8412
UA: Firefox 15.0
Веб-сайт

Re: Уроки стилистики (CSS)

Ещё имеет смысл добавить описание функции Inspect Element из контекстного меню. Вельми она удобна для изучения структуры страницы.


╓┐║│Ad  Блокировка рекламы в рунете: сайт и тема на форуме.
╟╡╙┘List Установить AdBlock Plus и подписки: RUAdlist+EasyList, АнтиСчётчик, BitBlock
ВНИМАНИЕ: BitBlock как котёнок — милый, но кусается, ворует со стола котлеты и творит прочие непотребства! Читайте описание на сайте!

Отсутствует

 

№504-10-2012 03:53:31

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2540
UA: Firefox 15.0

Re: Уроки стилистики (CSS)

Lain_13
До тех пор, пока оно не умеет инспектировать интерфейс браузера - оно останется недоделанным (но более красивым, а для кого-то и более удобным) DOMi.
Там из нового только 1 вещь: наглядное визуальное отображение значений width, height, border-width'ов, padding'ов и margin'ов для выбранного элемента в окошке Layout View.

Отсутствует

 

№608-10-2012 06:32:46

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1940
UA: Firefox 16.0

Re: Уроки стилистики (CSS)

iDev.Pi пишет:

пока оно не умеет инспектировать интерфейс браузера

Думаю, и не будет уметь - зачем это нужно для веб-разработки? Инспектирование UI браузера - это совсем другая область, для которой есть вполне соответствующий инструмент.
Тут, кстати, недовно косвенно была затронута тема оптимизации CSS (ссылку давать не буду, т.к. тот топик закрыт) - может быть, стоит отобразить это в FAQ? Основной материал есть здесь: https://developer.mozilla.org/en-US/doc … icient_CSS.

Отредактировано hydrolizer (08-10-2012 06:33:15)

Отсутствует

 

№703-06-2013 01:41:28

okkamas_knife
We are the Borg.       Resistance is futile.
 
Группа: Extensions
Зарегистрирован: 21-10-2009
Сообщений: 6557
UA: Seamonkey 2.14

Re: Уроки стилистики (CSS)

iDev.Pi
а можно както прописывать исключения?
ну типа *(а тут селектор элемента который должен игнорировать правило) {правило}
чтоб указать выполнить правило для всех кроме этого?


SeaMonkey Portable все версии

Отсутствует

 

№807-06-2013 02:40:32

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2540
UA: Firefox 21.0

Re: Уроки стилистики (CSS)

okkamas_knife
Через негативный псевдо-класс :not()

Выделить код

Код:

div:not(#fryerfrogs):not(.hates_us) { display: none !important; }
/* это правило не будет применено к узлам div, у которых значение id равно "fryerfrogs";
и к узлам div у которого значение class равно "hates_us",
но будет применено ко всем остальным узлам div */

IMG:not(:first-child) { display: none !important; }
/* это правило не будет применено к первым дочерним узлам IMG,
но скроет все остальные узлы IMG */

Более гибкие исключения, вроде вложенных исключений

Выделить код

Код:

a:not(b:not(c))

или комбинаторы внутри :not()

Выделить код

Код:

DIV:not(.blockpost > DIV)

не поддерживаются.

Насколько я помню, раньше и атрибутивные селекторы, вроде

Выделить код

Код:

DD:not([class^="user"])

не поддерживались, но сейчас поддерживаются.

Отредактировано iDev.Pi (07-06-2013 17:58:11)

Отсутствует

 

№907-06-2013 02:53:41

okkamas_knife
We are the Borg.       Resistance is futile.
 
Группа: Extensions
Зарегистрирован: 21-10-2009
Сообщений: 6557
UA: Seamonkey 2.14

Re: Уроки стилистики (CSS)

iDev.Pi
а почему тогда не срабатывает такое? (адресная строка всеравно остаётся чёрно-зелёной)
там есть какието исключения для * или я гдето с селектором ошибся?

Выделить код

Код:

*:not([id="urlbar"]){
-moz-appearance: none !important;
color: #00ff00 !important;
background-color: #000000 !important;
}
#urlbar{
-moz-appearance: none !important;
color: #aaaaaa !important;
background-color: #000066 !important;
}

SeaMonkey Portable все версии

Отсутствует

 

№1007-06-2013 17:35:43

Infocatcher
Not found
 
Группа: Extensions
Зарегистрирован: 24-05-2007
Сообщений: 3322
UA: Firefox 21.0

Re: Уроки стилистики (CSS)

okkamas_knife пишет:

(адресная строка всеравно остаётся чёрно-зелёной)

Под селектор с :not() попадают все анонимные узлы внутри #urlbar, в том числе и <html:input>, который и задает цвет.

И даже вот так:

Выделить код

Код:

@namespace html url("http://www.w3.org/1999/xhtml");
:not(.urlbar-input) {
    -moz-appearance: none !important;
    color: #00ff00 !important;
    background-color: #000000 !important;
}
.urlbar-input > html|div {
    -moz-appearance: none !important;
    color: #aaaaaa !important;
    background-color: #000066 !important;
}

Но в этом случае с :not() вообще не получится, так что предыдущее равнозначно вот этому:

Выделить код

Код:

@namespace html url("http://www.w3.org/1999/xhtml");
* {
    -moz-appearance: none !important;
    color: #00ff00 !important;
    background-color: #000000 !important;
}
.urlbar-input > html|div {
    -moz-appearance: none !important;
    color: #aaaaaa !important;
    background-color: #000066 !important;
}

Прошлое – это локомотив, который тянет за собой будущее. Бывает, что это прошлое вдобавок чужое. Ты едешь спиной вперед и видишь только то, что уже исчезло. А чтобы сойти с поезда, нужен билет. Ты держишь его в руках. Но кому ты его предъявишь?
Виктор Пелевин. Желтая стрела

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2011 Mozilla Russia
Язык отображения форума: [Русский] [English]