タグ

CSSと環境に関するiwwのブックマーク (2)

  • CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon

    この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー(スクロールバーが内容の前面に覆いかぶさるようなもの)が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー(スクロールバーが常に表示されるようなもの)が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで

    iww
    iww 2022/12/09
    こんな便利なプロパティがあるのか。 スクロールバーの幅を求めたり足したり引いたりすげー苦労してるのがもうやらなくて済むのか
  • あらゆる環境でアスキーアートを快適に閲覧出来るCSSはコレ! – b4log

    現在自分はやる夫之書のほか、やる夫 Wiki・やる夫AA録2と3つのアスキーアート(AA)関連のサイトを運営しています(あれ、いつのまにこんなに増えた?)。 AAをブラウザ上で適切に表示させるには、スタイルシート(CSS)でフォントと文字の大きさ・行間を指定する必要があります。ウィキペディアには以下のようにするように書かれています。 主に2ちゃんねるおよび、その影響を受けた電子掲示板で使用される。数行?十数行であることが多いが、巨大なものでは50行に達する場合もある。 2ちゃんねる黎明期に普及していたInternet Explorer5.0での表示を基準としたMS Pゴシック16ピクセル(12ポイント)、行間2ドットを標準として作られている。 W3C勧告のCascading Style Sheetsを利用してアスキーアートに適した表示を行う場合は、以下のように指定することが望ましい。 fo

  • 1