CSS currentColor研究_html/css_WEB-ITnose

「CSS 変数のトライアル」という記事を書きましたが、ネイティブ CSS を使用して変数を定義し、CSS の記述を簡素化し、コードの編成とメンテナンスを最適化できることを学びました。しかし、ひどい互換性の問題が私たちを遠ざけていました。それをオフにします。
しかし、互換性が高く強力な CSS 変数 currentColor があります。次に調べてみましょう。

はじめに

CSS には、長年にわたって互換性のある変数 currentColor がすでに存在します。これは、現在の要素の色への参照を表し、現在の要素および子孫要素の他の属性に適用できます。

h1 { color: hsl(0,0%,44%); padding: 1rem; /* 这里调用默认颜色 */ border-bottom: 4px solid; }/* 使用currentColor,用在其他属性上 */h1 { color: hsl(0,0%,44%); padding: 1rem; /* 这里调用默认颜色 */ border-bottom: currentColor 4px solid; }/* 使用currentColor,用在后代元素上 */a.blog{ text-decoration: none; font-weight:bold; }/*设置不同状态颜色*/a.blog           { color: #900; }a.blog:hover,a.blog:focus     { color: #990; }a.blog:active    { color: #999; }/*设置箭头*/a.blog:after{ width: 0; height: 0; border: 0.4em solid transparent; border-right: none; content: ''; display: inline-block; position:relative; top:1px; left:2px; }/*设置箭头继承父对象颜色*/a.blog::after,a.blog:hover::after,a.blog:focus::after,a.blog:active::after{ border-left-color: currentColor; }

currentColor を使用すると、コードの作成が大幅に簡素化され、コードの編成とメンテナンスが最適化されることがわかります。

例

currentColor のアプリケーションをデモンストレーションするために、ケースを作成しました。codepen を参照してください。オンラインで編集し、ダウンロードして収集することができます。このケースでは、currentColor とグラデーション、アニメーション、疑似オブジェクト要素の組み合わせを試しました。

HTML ファイルをアップロードし、広告を追加します。
HTML ファイル

<h2 class="icon">Let's go to whqet's blog</h2><p>前端开发whqet，<a class="blog" href="http://blog.csdn.net/whqet/">王海庆的技术博客</a>，关注前端开发，分享相关资源，希望可以对您有所帮助。csdn专家博客http://blog.csdn.net/whqet和个人独立博客http://whqet.github.io同步更新，希望可以得到您的支持与肯定，您的支持是我最大的动力！王海庆，浙江邮电职业技术学院软件技术青椒一枚，其貌不扬、其名不翔，关心技术、热爱生活，我爱<a class="link" href="#">怒放的生命</a>。</p>

その後、CSS では -prefix free を使用し、複雑なブラウザーのベンダー プレフィックスを考慮する必要がなくなりました。

ここでは、このブログ記事「Apple スタイルの下線」で説明されている効果を使用し、グラデーションを使用して線を描画し、テキストシャドウを使用して線を分離し、グラデーションで currentColor を使用します。

/*使用googlefont*/@import url(//fonts.googleapis.com/css?family=Cedarville+Cursive);/*使用渐变划线，利用text-shadow隔离线条*/h2.icon{ margin:10px 0; display: inline-block; font-size:3em; width:auto; font-family:Cedarville Cursive; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff; color: #000; background-image: linear-gradient( to right, currentColor 0%, #fff 120% ); background-repeat: repeat-x; background-position: 0 75%; background-size: 100% 3px; }

その後、適用を検討します。 currentColor を :after 要素に渡して、リンク装飾要素とリンク要素の色のバインディングを実現します。

p{ text-indent: 2em; line-height: 1.5em; }a.blog,a.link{ text-decoration: none; font-weight:bold; position: relative; margin-right:4px; }/*应用到后代伪类元素*/a.blog           { color: #900; }a.blog:hover,a.blog:focus     { color: #990; }a.blog:active    { color: #999; }a.blog::after{ width: 0; height: 0; border: 0.4em solid transparent; border-right: none; content: ''; position:absolute; right:-6px; top:2px; }a.blog::after,a.blog:hover::after,a.blog:focus::after,a.blog:active::after{ border-left-color: currentColor; }

アニメーション要素に適用する試み。

詳細

この記事の執筆プロセスは次の記事に大きく依存しています。より深く理解するには、次の記事をよく読んでください。

CSS-Tricks の記事

Zhang Xinxu の素晴らしい記事

W3C Ref

currentColor で CSS を短くする

form-controls-currentcolor-pseudo-elements

Liu Wayong の記事

感謝