Инвертирование страницы только средствами CSS

[homm]

Круто. Только белый пиксель посреди страницы смущает. Не лучше ли top:0; left: 0;?

[kichik]

Да, можно и так (в данном случае я просто перевел статью ;)

[kizu]

Достаточно будет top:-1px; ну и чуть подкрутить размер.

Lea Verou про это говорит, что ей не хочется тратить впустую половину аутлайна.

[kizu]

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

[homm]

Вот именно :)
Причем, похоже Опера не поддерживает outline-offset, или я его неправильно использую.

[romanoza]

я его пальцем пытался убрать, не получилось

[bes_internal]

возможно это поможет в accessibility для контрастого восприятия

[mkal]

В Опере (11.10) текст не инвертировался. Т.е. получился чёрный текст на почти чёрном фоне

[bolk]

У меня («Опера» 11.10, Mac OS X), всё нормально инвертировалось.

[heller]

Отлично :)

[Nerten]

Отличная закладка «Ночной режим».
За статью — спасибо, интересный подход.

[q0p]

А в лисе мы такое вероятно не увидим никогда: bug 359497 — Resolved WONTFIX

[piumosso]

А теперь главный вопрос — зачем?

[q0p]

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

[Devgru]

here comes the night.css

[Fduch]

>К тому же это даже не CSS3, а чистый CSS 2.1.

>Замечание: эта возможность будет работать только в Opera и IE9+, т.к. в настоящий момент только они поддерживают ключевое слово «invert» для цвета контура.

Кто там врал, что Firefox и Chrome полностью поддерживают CSS? Не стыдно вам?

[q0p]

В спецификации этой функции её поддержка браузера описана не как императив, а как опция — для браузеров передающих заголовок, что они умеют делать outline-color: invert. Для тех браузеров, которые такое заголовок не передают — по-умолчанию используется цвет фона элемента. Именно из-за этого в лисе этот баг WONTFIX, что лично меня очень расстроило, но формально — они нормально соответствуют стандарту w3c по поводу CSS.

[kichik]

Если бы более точным, то в спецификации написано, что

Conformant UAs may ignore the 'invert' value on platforms that do not support color inversion of the pixels on the screen.

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

[q0p]

Если вы ещё не поняли, то под платформой понимается браузер, а не ОС. Соответственно, моё утверждение более верно.

[Fduch]

>Именно из-за этого в лисе этот баг WONTFIX, что лично меня очень расстроило, но формально — они нормально соответствуют стандарту w3c
Угу. Точно так же они они одним единственным тупым багом убили весь XSLT на клиенте. Если бы не распространившийся, как чума, FF, мы уже давно жили при коммунизме data-driven web.

[bulbazaur]

я идиот убейте меня кто-нибудь!!1

[bulbazaur]

на самом деле идиот, макось делает обычные скрины даже при инвертированом цвете экрана(

[AlexTikhonov]

Долго думал что автор коммента хотел сказать, потом понял идею: Win+N под убунтой:

[qwerty1]

К вопросу "зачем"
Я читаю хабр в основном через RSS на коммуникаторе. В ридере выбрал темный фон. Так вот, знали бы вы, как я страдаю, читая исходные коды (которые отформатированы). Черное на черном. А трюк, описанный в топике, решает эту проблему. Осталось только понять как этот трюк использовать. Понятно, что ридер рендерит статью в браузере.