Html5-boilerplate: ::选择背景颜色默认

创建于 2011-07-19 · 44评论 · 资料来源: h5bp/html5-boilerplate

::selection样式的问题再次被提出，这次是在Paul Lloyd和Stu Robson 的推文中（除非最后一条推文实际上是关于旧的tap-highlight-color样式）。

据我所知，他们的担忧似乎是默认的background粉红色是一种糟糕的默认颜色。希望他们能提供任何进一步的描述和建议。

在色彩对比方面，我上次检查时，“粉红色”并不比浏览器使用的默认蓝色更好或更差 - 3.0：1。我认为在突出显示文本时删除text-shadow是一个很好的改进，所以我能看到的唯一替代方法是将背景切换为使用默认蓝色 - #3297FD - 和/或包括规则旁边的评论以说某事。

css

资料来源

necolas

所有44条评论

我喜欢在网站上选择文本，看到它是粉红色的，知道他们使用了样板。

我投票它保持粉红色; 如果有什么更能鼓励人们改变它，如果它只是默认的蓝色，那么每个人都不会注意到它并离开它，那么我们将再次拥有无聊的网站。

bencollier 于 2011-07-19

感谢您提交此问题 Nicolas。

我认为粉红色对于文本选择来说是一个糟糕的选择，因为它是如此明显，而且通常不适合许多网站的设计——在这个值没有改变的网站上选择文本可能会非常刺耳。我鼓励使用更中性的颜色；蓝色或灰色通常是不错的选择，但也许浅黄色也可以。

我想这与人们不研究样板内容并在没有定制的情况下批发使用它的潜在问题有关。您可以在多大程度上鼓励人们不那么懒惰（这可能与样板的精神相违背）可能存在限制，但我希望看到更多关于定制和调整文件的交流。也许这需要在不同的问题中提交;-)

最后，我听说有些人给出了与 Ben 相同的使用粉红色的理由。我会通过问你为谁开发你的网站来反驳这个论点？是针对其他开发人员还是您网站的用户？我敢肯定，对于大多数人来说，在文本选择上看到明亮的粉红色会让他们感到困惑而不是娱乐。

paulrobertlloyd 于 2011-07-19

有人可以解释为什么::selection背景颜色甚至需要首先被覆盖吗？

abitgone 于 2011-07-19

@abitgone因为你不能简单地删除text-shadow在高亮上，而不用现有的浏览器也杀死默认的高亮背景颜色。

necolas 于 2011-07-19

我和 Paul 在一起，我还没有看到一个网站，其中粉红色的文本选择符合设计并且看起来并不令人震惊。是否有任何特殊原因将其从用户期望的浏览器/操作系统默认设置更改？

kevinansfield 于 2011-07-19

所以::selection { text-shadow: none }不起作用？即使是这种情况，这肯定不是更改默认选择背景颜色的充分理由吗？

abitgone 于 2011-07-19

默认颜色是否因浏览器/平台而异？在这种情况下，_可能_有提供背景颜色的情况，但该默认值应该是中性的、经过深思熟虑的选择。

paulrobertlloyd 于 2011-07-19

我什至不确定为什么这是一个问题。

我们不能握住每个 Web 开发人员的手并告诉他们更改所有内容的默认样式。我认为粉红色是一种很好的颜色，可以提醒你，哦，是的，你应该改变它。

ghost 于 2011-07-19

然而，人们并没有改变它，所以作为提醒它失败了。请记住，这种风格的效果不会立即显现。当然，有一个合理的默认值会更好吗？

paulrobertlloyd 于 2011-07-19

👍1

+1 保留原样。如果粉红色冒犯了您，请更改它，否则不要理会它。

案件结案。

miketaylr 于 2011-07-19

如果目的是摆脱粉红色，那么教育 + 默认蓝色可能是最好的选择。没有任何神奇的颜色选择可以适用于每个站点。在某些网站上，更中性的颜色可能看起来不像粉红色那么糟糕，但我们越接近商业颜色，我们就越有可能在 ::selection 上创建消失的文本。

（忘记补充了：）
就我个人而言，我赞成放弃它并想办法教育人们将其作为他们在构建网站时需要考虑的设计元素。让人们在每个站点的基础上设计它比给他们一个不那么糟糕的默认设置更好。

roblarsen 于 2011-07-19

样式表不是只读的。如果它冒犯了您，请更改它。就个人而言，我喜欢粉红色。

ralphholzmann 于 2011-07-19

+1 保留原样。整个 Boilerplate 是删除键友好的。如果您不喜欢粉红色的文本选择，请选择不同的颜色，或者完全删除规则。

mathiasbynens 于 2011-07-19

这当然不是关于你“喜欢”什么。这是关于在样板中使用的合理默认值。

我不喜欢看到粉红色的高光，因为 90% 的时间是它被留在那里的错误，或者开发人员不知道如何更改它。样板代码可以通过使用更合适和中性的默认值来帮助减少这种影响，这不会破坏视觉设计。

ahume 于 2011-07-19

👍1

严重地？如果您不知道如何将其从粉红色更改为粉红色...也许您不应该在了解更多 css 之前使用它？

SeanJA 于 2011-07-19

粉红色是邪恶的热。

shichuan 于 2011-07-19

是的，这是让您入门的样板；为什么不把毛巾扔进去，并包括一个完整的模板！

我认为粉红色增加了一些特征和一个“复活节彩蛋”，突出了没有正确测试他们网站的开发人员。

bencollier 于 2011-07-19

正如我之前提到的，现有的浏览器不允许您仅重置::selection text-shadow ::selection （这可能是他们应该解决的问题）。如果突出显示的文本也有某些颜色或大小的文本阴影，则它可能看起来很混乱。所以如果你想避免 text-shadow-when-highlighted 问题，那么你必须声明一个::selection背景和颜色。

如果那些认为这是一个问题的人可以转向展示测试用例并提出替代方案（作为代码），那就太好了。目前，除了重新声明默认蓝色而不是使用粉红色之外，我们没有其他具体的评估，因为粉红色被认为不够“中性”。

necolas 于 2011-07-19

我个人认为蓝色是一种令人反感的默认设置。永远的粉红色。

SlexAxton 于 2011-07-19

Hot Pink++

gf3 于 2011-07-19

留下粉红色，h5bp 不应该因为有些人选择不更新选择颜色而改变

retlehs 于 2011-07-19

粉红FTW。

也许有人应该分叉样板，唯一的变化是默认的选择颜色？

gavinblair 于 2011-07-19

看起来这些人不同意应该更改选择颜色：

mathiasbynens 于 2011-07-19

嗯……解决了

SeanJA 于 2011-07-19

我肯定更喜欢蓝色...... -1 代表粉红色。它永远不会搭配任何东西，除非你建立一个带有滚动文本、黄色背景上的粉红色文本、闪烁的动画 gif 的网站......哦等等，我们不再使用 HTML4/3，我们也不在 1990 年代。

limeb 于 2011-07-19

就像你想让我们相信你不喜欢石灰一样？

SlexAxton 于 2011-07-19

上次我检查了limeblack不是一种颜色。如果是这样，那将是天堂和令人敬畏的交叉。 :D

我不知道这感觉就像我们试图从丰富多彩的过去中留下个人风格。我的意思是除了意外之外，为什么有人想要粉红色？

limeb 于 2011-07-19

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

roblarsen 于 2011-07-19

我只希望这有效...

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

然后我们会有石灰黑

SeanJA 于 2011-07-20

与保罗一起提出这个问题的另一个人。我终于有时间留下我的评论了。

我的问题不是颜色选择。我的问题是使用样板并且不编辑颜色以使其适合网站的其余部分的人的懒惰。您肯定希望它与您网站的其余部分联系在一起，对吗？

我的要求很简单。在这行 CSS 的上方/下方添加评论，提醒人们应该/可以更改它以适应网站的“设计”。就像“不要忘记重新定义大纲”一样，您会在 CSS 重置文件中获得。

这有望阻止设计人员/开发人员偷懒而只是逐字剪切和粘贴代码。

sturobson 于 2011-07-21

👍1

谢谢斯图，我认为这是一个非常合理的想法。

necolas 于 2011-07-21

实际上，后来的 Eric Meyer reset 版本实际上不再_只是_添加评论。以下是Eric关于为 :focus 规则保留默认值

…定义一个隐形的焦点是最初重置的最大错误。事后看来，这确实是一个明显的非受迫性错误，但是当我发布重置时，我确实没有想到它会被在一千个站点和框架中盲目复制（或者更糟糕的是，热链接）。我确实在样式表中说，人们应该定义一个焦点样式……通过将所有内容置于“简单基线”，会提醒有思想的工匠定义对其网站设计最有意义的焦点样式。取而代之的是，焦点大纲被大量删除，因为很多人，并非都是工匠，只是复制重置并在其上构建而没有考虑它。

在最新版本的重置中，Eric 使用以下符号，注释掉整个规则并使用 ????? 作为可以替换的占位符：

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

也许可以在这里使用相同的方法？

paulrobertlloyd 于 2011-07-21

👍1

Eric Meyer 重置中最初的outline删除具有破坏性，因为它引入了严重的可访问性问题（默认重置失败）。为::selection背景使用不同的颜色不会有这个问题。

necolas 于 2011-07-21

IMO 应避免使用 ::selection 颜色声明。它杀死了窗口非活动样式（http://css-tricks.com/9288-window-inactive-styling/），这本身就是一个原因。

frankpf 于 2011-07-26

是的，我们知道这一点。但是对于用户来说，突出显示文本阴影的问题很可能比不活动的选择样式更重要。对我来说，问题是在默认情况下包括这个之间的平衡，即使站点中没有text-shadow使用（为了保存用户在站点上有文本阴影的地方），或者移动它是为了“让它变得更好”。

值得注意的是，这已经在样板中（并且在野外）有一段时间了，存在问题的唯一原因是因为我创建了它。因此，无论哪种方式，这可能都不是什么大问题。

necolas 于 2011-07-26

“如果突出显示的文本也有某些颜色或大小的文本阴影，它可能看起来一团糟。因此，如果您想避免突出显示时的文本阴影问题，那么您必须声明 ::selection 背景和颜色。”

好吧，我们无法阻止人们做出糟糕的设计决策。 text-shadow ，大多数时候，不应该用于正文复制。

不过，如果您仍然想走那条路，我建议您使用浏览器默认颜色。

frankpf 于 2011-07-26

如前所述，我在 CSS 中的想法看起来像这样

/_-- 请记住更改此颜色以适合您的设计--_/

sturobson 于 2011-07-28

第一：+1 表示将其保留。

我的其余评论主要针对提出问题的人（因此将是@necolas和@sturobson）：

没有人能判断出选择高光的正确颜色是什么。如果这个讨论是有效的，那么人们可以争论我们还应该讨论锚标签的“理想”颜色（一罐单独的蠕虫）。

重点是：这完全是设计相关的东西，_应该_由设计师维护/更新，就像锚标签一样。

我喜欢粉红色！但是对于那些讨厌它的人，请在 CSS 文件的底部添加和更新这些规则：

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

adeelejaz 于 2011-08-01

我只代表 Paul Lloyd 记录了这个问题。

但讨论是完全有效的。默认样板链接颜色 _have_ 实际上已经标准化以匹配现代浏览器的默认值。

necolas 于 2011-08-01

@sturobson我在这些方面添加了评论： https :

necolas 于 2011-08-03

我希望添加该评论的影响为零，但至少这是朝着正确方向迈出的一步。感谢您跟进此问题 Nicolas。

默认样板链接颜色实际上已经标准化以匹配现代浏览器的默认值。

这就引出了一个问题，为什么不以相同的方式标准化选择颜色？将粉红色作为某种“荣誉徽章”佩戴的方式是一种非常可悲的状态。

paulrobertlloyd 于 2011-08-03

👍1

还有……场景！

paulirish 于 2011-08-03

我可能已经失去了生命中的 80 个小时，将它改回了粉红色。

每次我必须找到这个线程才能获得颜色代码。

我不在乎为什么我不应该设置它，选择将永远是该死的粉红色！

innovandrew 于 2015-12-13

👍1

@innovandrew竖起大拇指！

andremiguelaa 于 2015-12-15

此页面是否有帮助？

0 / 5 - 0 等级

Html5-boilerplate: ::选择背景颜色默认

所有44条评论

相关问题