自動カーニング
スタイルシート
font-feature-settings : "halt";
iOSで滑らかなスクロール
-webkit-overflow-scrolling
スタイルシート
.content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Safari（Webkit）向けに、フォントのレンダリングを調整
Safari（Webkit）向けに、フォントのレンダリングを調整
CSS
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; /* Safari での Default値 */
IE10ではテキストフォーム入力時に「クリアボタン」や「パスワード確認ボタン」非表示
概要
IE10ではテキストフォーム入力時に「クリアボタン」や「パスワード確認ボタン」が表示されます。
消す場合は下記スタイルシートを指定します。
:-ms-clear , :-ms-reveal
スタイルシート
input::-ms-clear { // クリアボタン非表示
display:none;
}
input::-ms-reveal {// パスワード確認ボタン非表示
display:none;
}
テキスト入力時のIMEの状態を指定する（IE独自仕様）
ime-mode
プロパティ値
| プロパティ値 | 説明 |
|---|---|
| auto | 特に指定しません。 |
| active | 初期値が日本語入力モードになります。 |
| inactive | 初期値が英数字入力モードになります。 |
| disabled | 英数字入力モードになります。ユーザーの操作によるモードの変更はできません。 |
<input style="ime-mode: auto;" type="text" />
<input style="ime-mode: active;" type="text" />
<input style="ime-mode: inactive;" type="text" />
<input style="ime-mode: disabled;" type="text" />
モバイル端末、テキストの自動拡大制御
概要
モバイル端末で横向きにした時に、テキストが自動拡大するのを防ぐ
CSS
-webkit-text-size-adjust: 100%;
英語テキストの大文字、小文字指定
text-transform
英語テキストの大文字表示、小文字表示を指定する際に使用
プロパティ値
| プロパティ値 | 説明 |
|---|---|
| none | 記述した通りに表示します。これが初期値です。 |
| capitalize | 単語の先頭文字を大文字で表示します。 |
| lowercase | 全てを小文字で表示します。 |
| uppercase | 全てを大文字で表示します。 |
| initial | デフォルト値には、このプロパティを設定します。 |
| inherit | 親要素からこのプロパティを継承します。 |
iPhoneリンクを長押しした時のポップアップメニューを出さない
-webkit-touch-callout
プロパティ値
| プロパティ | 説明 |
|---|---|
| default | 記述した通りに表示します。これが初期値です。 |
| none | 呼出を無効にします。 |
| inherit | 親要素からこのプロパティを継承します。 |
スタイルシート
-webkit-touch-callout:default;
-webkit-touch-callout:none;
-webkit-touch-callout:inherit;
フォント指定
CSS
@font-face{
font-family: "Original Yu Gothic";
src: local("Yu Gothic Light"),local("游ゴシック Light");
font-weight: 300;
}
@font-face{
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium"),local("游ゴシック Medium");
font-weight: 500;
}
@font-face{
font-family: "Original Yu Gothic";
src: local("Yu Gothic bold"),local("游ゴシック bold");
font-weight: bold;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, "Hiragino Kaku Gothic ProN","メイリオ", "M+ 1p",Osaka, sans-serif;
}