We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
リンク先の漏れがないか、適切にマークアップされているか、任意のクラスやプレフィックスが付いているか探すなど。
// 任意のプレフィックスがついている要素を探します。 // @example scss // @include _debug-prefix('c-') { // outline: 5px solid crimson !important; // background-color: rgba(crimson, 0.1) !important; // } @mixin _debug-prefix($prefix) { [class^="#{$prefix}"], [class*=" #{$prefix}"] { @content; } } // 任意のクラスがついている要素を探します。 // @example scss // @include _debug-class('c-layout') { // outline: 5px solid crimson !important; // background-color: rgba(crimson, 0.1) !important; // } @mixin _debug-class($class) { [class^="#{$class} "], [class$="#{$class}"] { @content; } } // @include _debug-element('[target="_blank"]') { // 外部リンクを探す // outline: 5px solid crimson !important; // background-color: rgba(crimson, 0.1) !important; // } // @include _debug-element('[href=""], [href="#"]') { // リンク先の指定がない // outline: 5px solid crimson !important; // background-color: rgba(crimson, 0.1) !important; // } @mixin _debug-element($element) { #{$element} { @content; } }
The text was updated successfully, but these errors were encountered:
/** * red: バリデートエラーになるので要修正。 */ /* img要素にalt属性は必須。 */ img:not([alt]) { outline: 5px solid red; } /* 直下の子要素にはli要素以外は入れられない。 */ ul > :not(li), ol > :not(li) { outline: 5px solid red; } /** * purple: バリデートで警告される。フォールバックをする必要はあるか? * フォールバック対応するのであればコメントアウトする。 */ header[role="banner"] { outline: 5px solid purple; } nav[role="navigation"] { outline: 5px solid purple; } main[role="main"] { outline: 5px solid purple; } aside[role="complementary"] { outline: 5px solid purple; } footer[role="contentinfo"] { outline: 5px solid purple; } /** * yellow: 問題がないか確認する。 */ /* altは必要か? */ img[alt=""] { outline: 5px solid yellow; } /* ルート相対パスになっていない(相対パスを使用する場合は`:not()`を削除する) */ img:not([src^="/"]) { outline: 5px solid yellow; } /* リンク漏れ?インラインでjsのトリガーが必要か? */ a[href="#"], a[href*="javascript"] { outline: 5px solid yellow; } /* 外部リンクを使用するか?リンク漏れがないか? */ a[target] { outline: 5px solid yellow; } /* acope属性を指定するのが望ましい。 */ th:not([scope]) { outline: 5px solid yellow; } /* `thead``tbody``tfoot`を指定するのが望ましい。 */ table > tr { outline: 5px solid yellow; } /* style属性とID属性は指定しないのが望ましい。 */ [style] { outline: 5px solid yellow; } [id] { outline: 5px solid yellow; }
Sorry, something went wrong.
CSSとしてデバッグ機能を持たせる必要があるか? 例えばChromeの拡張機能やブックマークレットなどで代用できないか?
No branches or pull requests
リンク先の漏れがないか、適切にマークアップされているか、任意のクラスやプレフィックスが付いているか探すなど。
The text was updated successfully, but these errors were encountered: