web/css の履歴(No.1)

CSSのTips（10年前ぐらいの...）#

リセット#

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">

ラジオボタンがdisabledだったら隣の文字の色を変たい#

相談されてハマって悩んだ

<label><input type="radio" disabled><span>ここの文字を変えたい</span></label>
label input[[disabled] + span {
 color: #ccc;
}

iOSで横に向けたときに文字サイズが大きくならないようにする#

body {
 -webkit-text-size-adjust: none;
}

:visitedで背景画像が変更できない#

  • そういう仕様。
  • 使えるもの
a {
 color
 background-color
 border-color
 outline-color
}

iOSで:visitedが効かない#

  • 色々試したけど、リンク先が パラメータ付きのURLだと訪問済みにならない 気がする……。（iOS8 Safari）

iOS系でinputのデザインが独自になる#

input {
   -webkit-appearance: none;
   border-radius: 0;
}

でリセット

Android4系でwidthが効かない#

background-color:#fff;で改善することがある

hover時にopacityを使うとFirefoxで画像が歪む#

img{background:#fff;}

または

img:hover{background:#fff;}

で解決

preにoverflow:auto;を指定するとIE6-7でずれる？#

フォントサイズについて#

CSSでフォントサイズを指定した場合、OSやブラウザごとに表示が異なる場合があります。特にメイリオフォントのIE8とMacのSafariは思ったより大きい表示になるので実際に確認したほうがいいと思います。

フォントサイズ検証ページで、実際に環境を持っている人は各自検証してみて下さい。

参考#

その他#

折り返し（改行）#

連続する半角英数の対応#

対処法#

昔はIE・Firefox・Chromeで改行の挙動にバラつきがあったため複雑な記述が必要だったが、2018年現在は下記を書けば基本的には解決。

body{
  word-break:break-all;
  word-wrap:break-word;
}

行頭に「。」が来るのを禁止する（禁則処理）#

参考#

preの場合#

preタグの場合は例外となるため、下記のように横スクロールなどで対処する。

pre{
  overflow-x:auto;
}