react-routerのパスを正規表現でバリデーションする
react-routerの4系以上からで
/hogehoge/:id
のように:id部分の入ってくる値を整数値だけにしたい場合
/hogehoge/:id(\d+)
のように正規表現を指定する事ができます。
<Route path="/hogehoge/:id(\d+)" component={Hoge} />
これでルーティングを細かく制御したり、リダイレクト処理をしたりと自由に処理を扱う事ができそうです。
文字詰めCSS font-feature-settings
テキストの文字詰めをしたい時に役立つのがfont-feature-settingsプロパティ。
font-feature-settings: "palt" 約物を含む和文の字間を詰める font-feature-settings: "pkna" 仮名系のみ字間を詰める
この２種の設定方法があります。
文字詰した方が見やすい場合もありますが、そうでない場合もあるのでその場合はletter-spacingで調節するのが良さそうです。
ほとんどのブラウザで対応されていますが、webフォント等の影響で文字が崩れたりする場合があるので注意しましょう。
文字詰時の参考になるサンプルページがあったので載せておきます。
折り返し制御するcss
長いテキストや長いURLを途中で折り返す時にcssで設定する主なプロパティが
word-break: break-all
または
word-wrap: word-break; overflow-wrap: word-break;
word-wrapとoverflow-wrapを併記していますが、word-wrapからoverflow-wrapへと改称されたためです。ブラウザによってoverflow-wrapがサポートされていなかったりするので、word-wrapも一緒に記載すると良いです。
それぞれ名前が似ていますが、挙動が違います。
word-break: break-all
好ましくない位置でテキストを折り返してしまうことがあります。
例えばorのような単語でも、orが行ボックスの幅からあふれそうな位置にあれば、あふれる直前で折り返すためoとrの途中で折り返してしまいます。
word-wrap: break-word
単語の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。 可能な限り折り返しを避けることができます。
Cache-Control max-age=0 no-cache
ブラウザのキャッシュを制御するのに設定するのが、Cache-Control。
Cache-Control: max-age=N
のようにしてレスポンスヘッダに設定して使います。
設定方法に、Cache-Control: max-age=0とCache-Contro: no-cacheがあるのですが、二つともキャッシュ制限してないようにみられます。
ですが、それぞれ同じようで挙動が違うので書き留めておきます。
max-age=0
validateして最新と判定できたならキャッシュを返します。最新なら304 を返します。
no-cache
no-cacheはcacheを使うことを許していません。なのでvalidateすらせず200で返すように促します。
rel="noreferrer"
先日の記事でrel="noopenerについて記述しました。
今回は補足として、rel="noopener noreferrer"と設定する事がより良い事がわかりました。
noopnenerはIE/Edgeやある端末ブラウザで対応していません。
Can I use... Support tables for HTML5, CSS3, etc
代替としてnoreferrerでリファラーを送信しなくなるので設定しておくのが望ましいです。
rel="noopener"
aタグにtarget="_blank"を設定している場合は、rel="noopener"をつけておくのがよさそうです。
というのも、遷移先のページのjavascriptで元のページを操作することができてしまうそうです。
遷移先でwindow.opener.location=hogehogeとしてあると元タブのページはでhogehogeのページ飛ばすことができてしまったりします。
そのような悪質な行為を防ぐために、target="_blank"で別タブでページを開く場合はrel="noopener"をつけておく事をオススメします。
