el-input限制样式_访问链接的样式限制

el-input限制样式

Links can be styled any which way you like to provide unique site navigation. These styles can be extended to pseudo states like :hover to create dynamic transitions. However, there are significant restrictions on styling links that the user has previously visited, limitations that are often unexpected and exasperating, especially for designers and developers who don’t understand the reasons why.

链接的样式可以通过任何方式设置，以提供独特的站点导航 。 这些样式可以扩展到伪状态，如:hover以创建动态过渡 。 但是，用户以前访问过的样式链接有很大的限制，这些限制通常是意料之外的，而且很恼人，特别是对于不了解原因的设计师和开发人员。

访问过的样式 (Visited Styles)

Conventionally, user-agent stylesheets (the built-in styles that ship with the browser, and are applied by default to every web page) make text links blue and underlined. Of course, this can be changed:

按照惯例， 用户代理样式表 (浏览器附带的内置样式，默认情况下应用于每个网页)使文本链接变为蓝色并带有下划线。 当然，可以更改：

a:link {
    color: currentColor;  
    font-weight: bolder; 
    text-decoration: none;
    border-bottom: 1px dashed;
}

This declaration styles the link using the color of the text that surrounds it, bolds it, removes the solid underline and substitutes a dashed underline using border-bottom. Similar treatment can be provided to visited links. For example, using Sass to lighten links that have been clicked on:

该声明使用链接周围的文本颜色设置链接的样式，将其加粗，删除实线下划线并使用border-bottom代替虚线下划线。 可以为访问的链接提供类似的处理。 例如，使用Sass减轻已单击的链接：

a:visited {
    color: lighten(currentColor, 30%);  
}

Note that a link will appear visited if the URL it points to remains in the browser’s history; the user isn’t required to click on that particular link in order to display it as being “visited”. This feature led to the restrictions discussed below.

请注意，如果链接所指向的URL保留在浏览器的历史记录中 ， 则该链接将被访问。 不需要用户单击该特定链接即可将其显示为“已访问”。 此功能导致了下面讨论的限制。

For links like those featured in this site’s web development reading lists, it would make sense to provide a more significant, progressive indication that a page has been read. You might assume that you could do so by simply adding generated content to the visited state: a checkmark, for example.

对于像本网站的Web开发阅读列表中的那些链接那样，有意义的是提供一个更重要的，渐进的指示，表明已阅读页面。 您可能会假设您可以通过将生成的内容简单地添加到访问状态(例如，选中标记)来做到这一点。

a:visited:after {
    content: "✓"; 
}

But if you test this, you’ll find that the tick mark does not appear. Adding generated content to the a:link state works… so why not a:visited?

但是，如果您对此进行测试，则会发现刻度线没有出现。 将生成的内容添加到a:link状态是可行的……那么为什么不a:visited呢？

访问链接的秘密和局限性 (Secrets and Limitations of the Visited Link)

The requirement of the browser to track user history in order to style a:visited states led to security risks: analyzing visited links with getComputedStyle could reveal the entire browser history. For that reason, a:visited styles have very strict limitations:

浏览器必须跟踪用户历史记录以设置a:visited状态的样式， a:visited带来安全风险：使用getComputedStyle分析访问的链接可能会揭示整个浏览器历史记录。 因此， a:visited样式具有非常严格的限制：

1. visited links can't be altered in a way that affects their layout (since that would allow you to query the DOM layout properties).
   访问的链接不能以影响其布局的方式进行更改(因为这将允许您查询DOM布局属性)。

2. Nothing can be changed that could involve an external file, which could be recorded on a server (which is why :before and :after are out-of-bounds)

   无法更改可能涉及外部文件的任何内容，该文件可以记录在服务器上(这就是为什么:before和:after越界的原因)

3. Nothing that could limit pointer events (mouse activity) on the link or elements underneath can be altered (meaning: no opacity or background-image changes)

   不会改变可能限制链接或下面的元素上的指针事件(鼠标活动)的任何内容(这意味着：不opacity或background-image没有变化)

That leaves just four properties with which to change the appearance of visited links:

剩下仅四个属性即可更改访问链接的外观：

• color

  color

• background-color

  background-color

• border-color

  border-color

• outline-color

  outline-color

There's further restrictions inside this already limited set: because of the opacity rules, you can’t change the transparency of visited links: trying to style a:visited with rgba or hsla will either be completely ignored, or have the alpha component of the color ignored. In addition, the dependant state of elements after the link have restrictions: sibling connectors, such as a:visited + span, will act as if the link has not been visited at all, outside of changes to the four properties listed above. The rules also mean you can’t add, remove or change background images on a link in order to show a visited state.

在已经有限的集合中还有其他限制：由于不透明规则，您无法更改访问链接的透明度 ：尝试设置a:visited rgba或hsla a:visited hsla将被完全忽略，或者具有颜色的alpha分量忽略了。 另外，链接后元素的依赖状态有限制：兄弟连接器，例如a:visited + span ，将在完全不访问链接的情况下起作用，除了上面列出的四个属性的更改之外。 这些规则还意味着您不能在链接上添加，删除或更改背景图像以显示访问状态。

结论 (Conclusion)

While these restrictions do impose limits on styling visited links, they shouldn’t be too much of an issue so long as you keep them in mind; security holes continue to exist due to these vulnerabilities, although they are being attended to.

尽管这些限制确实限制了访问链接的样式，但只要您牢记这些限制，就不应该成为太大的问题。 尽管存在这些漏洞 ，但由于这些漏洞 ， 安全漏洞仍然存在 。

There is still the very interesting possibility of using blend modes in combination with background colors for visited links, an option that recovers many of the creative possibilities lost under the restrictions I’ve discussed here. I’ll discuss those in the next article.

对于访问的链接，仍然有将混合模式与背景色结合使用的非常有趣的可能性，该选项可恢复在我这里讨论的限制下丢失的许多创意可能性。 我将在下一篇文章中讨论。

翻译自: https://thenewcode.com/1043/Limitations-on-Styling-Visited-Links

el-input限制样式