Html5-boilerplate: :: выбор цвета фона по умолчанию

Мне нравится выделять текст на веб-сайте, видеть его ярко-розовый и знать, что они использовали шаблон.

Я считаю, что он останется ярко-розовым; если бы что-то больше поощряло людей изменить это, если бы это был просто синий цвет по умолчанию, тогда никто бы этого не заметил и просто оставил бы это, тогда у нас снова были бы скучные сайты.

Спасибо за подачу этого вопроса, Николас.

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

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

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

Может кто-нибудь объяснить, почему цвет фона ::selection вообще нужно переопределить?

@abitgone Потому что вы не можете просто удалить text-shadow при выделении без того, чтобы существующие браузеры также убили цвет фона выделения по умолчанию.

Я здесь с Полом, мне еще не приходилось видеть веб-сайт, на котором выделенный ярко-розовый текст сочетается с дизайном и не выглядит шокирующим. Есть ли какая-то конкретная причина, по которой он был изменен по сравнению с браузером / ОС по умолчанию, которого ожидают пользователи?

Итак, ::selection { text-shadow: none } не работает? Даже если это так, конечно, это не достаточно веская причина для изменения цвета фона выделения по умолчанию?

Цвет по умолчанию различается в зависимости от браузера / платформы? В этом случае _может_ быть случай для предоставления цвета фона, но это значение по умолчанию должно быть нейтральным, рассматриваемым выбором.

Я даже не уверен, почему это проблема.

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

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

+1 за то, что оставил все как есть. Измените его, если розовый цвет вас оскорбляет, и оставьте его в покое, если это не так.

Дело закрыто.

Если намерение состоит в том, чтобы отойти от ярко-розового, то, вероятно, лучшим выбором будет образование + синий по умолчанию. Не существует волшебного выбора цвета, который "подойдет" для каждого сайта. Более нейтральный цвет на некоторых сайтах может выглядеть не так плохо, как ярко-розовый, но чем ближе мы подходим к деловым цветам, тем больше вероятность, что мы создадим исчезающий текст на :: selection.

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

Таблица стилей не только для чтения. Измените его, если это вас обидит. Лично мне нравится розовый.

+1 за то, что оставил все как есть. Вся Boilerplate удобна для клавиш удаления. Если вам не нравится выделение розового текста, выберите другой цвет или просто удалите правило (я).

Конечно, дело не в том, что вам «нравится». Речь идет о разумных значениях по умолчанию, используемых в шаблоне.

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

Шутки в сторону? Если вы не можете придумать, как изменить его с розового ... возможно, вам не стоит его использовать, пока вы не узнаете больше о css?

розовый ужасно горячий.

Да, это шаблон для начала; почему бы не бросить полотенце и не приложить к нему целый шаблон!

Я думаю, что ярко-розовый цвет добавляет персонажа и подчеркивает «пасхалку» разработчиков, которые не тестируют свой сайт должным образом.

Как я упоминал ранее, существующие браузеры не позволяют сбросить только text-shadow в ::selection (это то, что им, вероятно, следует исправить). Выделенный текст может выглядеть беспорядочно, если он также имеет текстовые тени определенных цветов или размеров. Поэтому, если вы хотите избежать проблемы с теневым текстом при выделении, вам нужно объявить фон и цвет ::selection .

Если бы те, кто думает, что это проблема, могли бы перейти к представлению тестовых примеров и предложению альтернатив (в виде кода), это было бы здорово. На данный момент у нас нет ничего конкретного для оценки, кроме повторного объявления синего по умолчанию вместо использования ярко-розового, потому что розовый не считается достаточно «нейтральным».

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

Hot Pink++

оставьте розовый, h5bp не следует изменять только потому, что некоторые предпочитают не обновлять цвет выделения

Ярко-розовый FTW.

Может быть, кому-то стоит разветвить шаблон с единственным изменением - цветом выбора по умолчанию?

Похоже, эти ребята не согласны с тем, что нужно изменить цвет выделения:

Ну ... это решено

Я определенно предпочитаю синий ... -1 для ярко-розового. Он никогда ни с чем не сочетается, ну, если вы не создаете сайт с прокручивающимся текстом, розовым текстом на желтом фоне, мигающими анимированными гифками ... Ой, подождите, мы больше не использовали HTML4 / 3, и мы не в 1990-х.

Как будто вы хотите, чтобы мы поверили, что вы не предпочитаете салатовый цвет?

В прошлый раз я проверил, что салатовый - это не цвет. Если это так, то это будет нечто среднее между небом и великолепием. : D

Не знаю, просто кажется, что мы пытаемся уйти от яркого прошлого . Я имею в виду, кроме несчастного случая, зачем кому-то розовый?

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }

Я только хочу, чтобы это сработало ...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

Тогда у нас был бы черный лайм

Быть другим человеком, который поднял этот вопрос вместе с Полом. Я наконец-то добрался до комментариев.

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

Моя просьба проста. Добавьте комментарий над / под этой строкой CSS, напоминающий людям, что его следует / можно изменить, чтобы он соответствовал «дизайну» сайта. Например, «не забудьте переопределить контур», который вы получите в файле сброса CSS.

Мы надеемся, что это остановит ленивого дизайнера / разработчика и просто дословно сокращает и вставляет код.

Спасибо, Стю, я думаю, это вполне разумная идея.

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

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

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

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

Может быть, здесь можно применить такой же подход?

Первоначальное удаление outline в сбросе Эрика Мейера было деструктивным, потому что оно привело к значительным проблемам с доступностью (сбой сброса по умолчанию). Использование другого цвета для фона ::selection не имеет этой проблемы.

ИМО следует избегать объявления цвета :: selection. Он убивает неактивную стилизацию окна (http://css-tricks.com/9288-window-inactive-styling/), что уже само по себе является причиной.

Да, мы это знаем. Но вполне вероятно, что проблема тени текста при выделении - более серьезная проблема для пользователей, чем неактивное оформление выделения. Для меня проблема в том, где баланс между включением этого по умолчанию, даже если на сайте не используется text-shadow (чтобы сохранить пользователей, где на сайте есть текстовая тень), или перемещением чтобы «сделать его лучше».

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

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

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

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

Мое мышление в CSS, как упоминалось ранее, будет выглядеть примерно так, хотя

/ _-- ПОМНИТЕ изменить этот цвет, чтобы он соответствовал ВАШЕМУ дизайну --_ /

Во-первых: +1 за то, что оставил.

Остальная часть моего комментария предназначена в основном для людей, которые подняли эту проблему (так что это будут @necolas и @sturobson):

Никто не может судить, какой цвет подходит для выделения подсветки. Если это обсуждение справедливо, то можно поспорить, что мы должны также обсудить «идеальный» цвет для якорных тегов (отдельная банка с червями).

Дело в том, что это полностью зависит от дизайна, и дизайнер _ должен_ поддерживать / обновлять, как теги привязки.

Обожаю ярко-розовый! Но для тех, кто ненавидит это, добавьте и обновите эти правила внизу своего файла CSS:

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }

Я зарегистрировал проблему только от имени Пола Ллойда.

Но обсуждение вполне справедливо. Стандартные цвета ссылок по умолчанию _ фактически нормализованы, чтобы соответствовать значениям по умолчанию в современном браузере.

@sturobson Я добавил комментарий по этим строкам: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

Я ожидаю, что добавление этого комментария не окажет никакого влияния, но, по крайней мере, это шаг в правильном направлении. Спасибо, что ответили на этот вопрос, Николас.

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

Возникает вопрос, почему бы не нормализовать цвет выделения таким же образом? То, как ярко-розовый используется как своего рода «знак почета», - довольно печальное положение вещей.

и .... сцена!

Я, наверное, потерял 80 часов своей жизни, сменив цвет обратно на ярко-розовый.

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

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

@innovandrew палец вверх!