変更リストタグ(:marker)-IEとSafariホットスポット


応用機器
  • サービスの個人情報処理規定を表示するページ開発が行われている.Unicodeで丸数字(①②③④)を表します.
  • 2::markerを使用して変更されましたが、makrerはクロムで正常に動作していますが、IEとSafariはサポートされていません.::marker MDN Docs
  • ::marker
  • 項目の記号または番号を含むリスト項目のタグボックスを選択します.基本的な<li></li>ランプを使用する例の1つです.
  • 適用例
    @counter-style circled-numbers {
        system: fixed;
        symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469";
    }
    
    ...
    
    ul.list-style-circle-number-list {
                        list-style: none;
                        counter-reset: circle-counter;
    
                        > li.circle-number-item {
                            counter-increment: circle-counter;
    
                            &::marker {
                                content: counter(circle-counter, circled-numbers) " ";
                            }
                        }
                    }
    最初はクロムに応用できると思われていたので、導入しました.ブラウザをチェックすると、IEとSafariはそれらが適用されないことを発見しました.
    +)また、@counter-styleも2つのブラウザをサポートしておらず、基本構文のコードを使用して変更する必要があります.
    繰り返しEach-List(@each)
  • は最終的に最も基本的なscss構文を返して適用しようとし、リストに必要な文字のUnicodeを加えた.その後@eachでリストを巡り、indexを使用して子供にアクセスする方法.
  • 適用例
    $obj: "\2460", "\2461", "\2462", "\2463", "\2464", "\2465", "\2466", "\2467", "\2468", "\2469";
    
    ...
    
    ul.list-style-circle-number-list {
                        list-style: none;
    
                        @each $ele in $obj {
                            $index: index($obj, $ele);
    
                            > li.circle-number-item:nth-child(#{$index}) {
                                position: relative;
                                display: block;
                                padding-left: 1rem;
    
                                &:before {
                                    position: absolute;
                                    left: 0;
                                    content: "#{$ele}";
    
                                }
                            }
                        }
                    }
    absolute:before要素によって位置が提供されます.
    +)最初はcontentに{#ele}万しか入れていませんでした
    cssが読めないという問題が発生しました.
    コードを1つだけ入れました
    ""を通じて相手にメールを送るべきです.
    結果

    すべてのブラウザに目的のタグを適用する方法を学びました.😎✌️
    リファレンス
    https://appdevelopmaster.tistory.com/m/382?category=912939