vimでcssファイルに色付け
東京嫉妬経由。cssファイルをvimで編集している時に、一番確認に時間がかかるのは私の場合色指定だったりします。
ブラウザでオートロードとかしてもその色指定の場所をブラウザ上で探すのも結構手間。それにちゃんとした色を作るときはドローソフトとか使ってたりするので、その二度手間もある。
んで、cssを編集している時に「#ffff00」とかの指定を「#ffff00」みたいに指定された色で文字の背景に色をつけるというvimプラグインを配布されていたので紹介。
自分の場合は、~/runtime/syntax/css.vimの最後に追加した。htmlファイルとかphpファイルとかの編集でもcssのシンタックスを読み込んでいるしね。
黒い色を指定すると文字自体が読みにくくなるのはご愛嬌だけど、かなーり便利。微妙な色指定には使えないけどデバッグやら簡単なチェックには激しく使える。
display:noneをする時にはスクリーンリーダにも配慮
456 Berea Street経由。cssに関してのアクセシビリティの記事でこんなのがありました。
cssの「display:none;」該当要素は表示しないというプロパティ設定は、音声読み込みソフトであるスクリーンリーダなどでは機能しないという事らしい。
元々CSSには文章構造と見た目を区別するためのもので、アクセシビリティ向上の意味合いもあると思っています。これがdisplay:none;を使うだけで意味のない要素がスクリーンリーダなどで読まれてしまうってのはちょいと問題がありそうな気がする。
スクリーンリーダ自体が視覚障害のある方々のためのツールというのが発祥だと思うので、なるべくならCSS側でも対応が出来る事があれば対応した方がよさそうです。一応引用先では「このような対応はどう？」というのが示されていました。
.hidden { display:none; visibility:hidden; }
つまり、visibility:hiddenも入れましょうっつーこってすな。気をつけよう。
リンクしたときの点線を消す
ちょっと細かい物なんですが、CSSのネタ。今まで気がつかなかった、もしくは知らなかった自分がアホ臭い。のでメモしておく。
何かというとHTML上にあるリンクをクリックして遷移する時に「これをクリックしましたよ！」っていうメッセージなのか灰色の点線が表示されるブラウザがありますよね。一応IE(internet explore)とFirefoxとは出たけどWindows版Safariは出なかった。他のブラウザは確認してないけど、表示されるブラウザがあるっていう事でお許しを。
んで、これを消したくてずっと悩んでいたんだけど、忘れた頃にたまたま見つけました。こちら「CSS Hacks & Issues」。他にも色々CSSのハックが載ってますが、この中にリンクした時の点線を消す方法が載ってました。
どうも以下のようにすれば良い感じです。
a { outline: none; }
つまり、対象要素のoutlineをnoneにするって事みたいです。単純だーうわーん。
