2

完全に経験の浅いユーザー (WYSIWYG エディターを使用) が PDF リンクの横に PDF アイコンを表示できるようにする CSS スタイルシートを作成したいと考えています。ただし、これにより、フォント サイズが異なる画像が不必要に引き伸ばされる可能性があります。ユーザーがこれらのアンカーに適用したフォント サイズを確認して、正しいアイコンを適用する方法はありますか?

私はこのような単純なものを望んでいます:

:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-size: 1em !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    color:inherit !important;
    content:" " !important;
    padding-right:1.5em !important;
    text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-image:url('/images/MIME_PDF_16px.png');
}
:link[href$=".pdf"][style.line-height>16px]::after,
:visited[href$=".pdf"][style.line-height>16px]::after{
    background-image:url('/images/MIME_PDF_32px.png');
}
:link[href$=".pdf"][style.line-height>32px]::after,
:visited[href$=".pdf"][style.line-height>32px]::after{
    background-image:url('/images/MIME_PDF_48px.png');
}
:link[href$=".pdf"][style.line-height>48px]::after,
:visited[href$=".pdf"][style.line-height>48px]::after{
    background-image:url('/images/MIME_PDF_64px.png');
}
:link[href$=".pdf"][style.line-height>64px]::after,
:visited[href$=".pdf"][style.line-height>64px]::after{
    background-image:url('/images/MIME_PDF_128px.png');
}

あるいは、次のようなものがいいでしょう:

:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-size: 1em !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    color:inherit !important;
    content:" " !important;
    padding-right:1.5em !important;
    text-decoration:inherit !important;
}
:link[href$=".pdf"]::after,
:visited[href$=".pdf"]::after{
    background-image:16px 16px url('/images/MIME_PDF_16px.png'),
                     32px 32px url('/images/MIME_PDF_32px.png'),
                     48px 48px url('/images/MIME_PDF_48px.png'),
                     64px 64px url('/images/MIME_PDF_64px.png'),
                     url('/images/MIME_PDF_128px.png');
}

そのようなセレクターまたは値が存在しない場合、W3C に提案する必要がありますか? これは CSS の哲学に反しますか?

4

1 に答える 1