[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>情報備忘録>IE6以下で<a>以外にも:hoverを利用
IE6以下で<a>以外にも:hoverを利用
Web creators (ウェブクリエイターズ) 2008年 01月号 [雑誌]
IE6以下ではa要素以外の:hoverや:activeをサポートしていないのでCSSで見た目を変化させようとしてもできないが、IE独自のビヘイビアを利用することでIE6でも:hoverや：activeができるようになるという。
試してみたが恐ろしく簡単な手順で恐ろしく使えることがわかって眠気がぶっ飛んだ。
手順は下記の3ステップ
- .htcファイルのダウンロード
- MIMEタイプの設定
- CSSの設定
1. .htcファイルのダウンロード
世の中にはいろいろなhtmlコンポーネントがあるようだが、とりあえずは:hoverなどの擬似クラスを拡張してくれる「csshover.htc」を利用してみよう。
- ダウンロードページ
- whatever:hover
上記ページから
- Version 1.42.060206 (:hover and :active)
- Version 2.02.060206 (1.42 and :focus)
の2つをダウンロードしておこう。ダウンロードファイルを解凍すると「csshover.htc」と「csshover2.htc」が出てくるが1.x系が:hoverと:activeをa以外にもbody内のすべての要素で利用できるようにするもので2.x系が:focusをa,input,textareaで利用できるようにするものらしい。目的に応じてサイトにコピーしよう。
2. MINEタイプの設定
専用サーバならconfファイルとかで設定するのだろうか？共有サーバの場合は.htaccessが利用できれば設定可能だ。おそらく有料のホスティングサービスなら大抵設定できると思われる。.htaccessに下記一文を追記してUPしましょう。
.htaccess
- AddType text/x-component .htc
3. cssの設定
body 以下の要素に適用するにはcssに下記のように記述する。
CSS
- body {
- behavior: url("/ファイルまでのパス/csshover.htc");
- behavior: url("/ファイルまでのパス/csshover2.htc");
- }
cssからのパスではなくcssを呼び出すファイルからのパスになるのでドキュメントルートからのパスで設定したほうがよいです。
これで準備は完了。あとは下記のようなソースで利用できます。
HTML
- <table>
- <thead>
- <tr>
- <th>ファイル名</th>
- <th>効果</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>擬似クラス拡張</th>
- <td>csshover.htc</td>
- </tr>
- <tr>
- <th>csshover.htc</th>
- <td>:hover、:activeをすべての要素で</td>
- </tr>
- <tr>
- <th>csshover2.htc</th>
- <td>:focusをa、input、textareaで</td>
- </tr>
- </tbody>
- </table>
- <br />
- <input type="text" /><br />
- <textarea></textarea>
CSS
- tbody tr:hover {
- background-color: #FFCC00;
- }
- tbody tr:active {
- background-color: #00CCFF;
- }
- input:focus {
- background-color: #FFFFCC;
- font-weight: bold;
- color: #FF0000;
- font-size: 2em;
- }
- textarea:focus {
- background-color: #FFFFCC;
- font-weight: bold;
- color: #FF0000;
- padding: 10px;
- height: 200px;
- width: 200px;
- }
実行結果
| ファイル名 | 効果 |
|---|---|
| 擬似クラス拡張 | csshover.htc |
| csshover.htc | :hover、:activeをすべての要素で |
| csshover2.htc | :focusをa、input、textareaで |
確認したところIE6、Multiple Explorers の5.01、5.5で動作しました。macIEでも動作しそうですね。
これでフルCSSのプルダウンとかも簡単に作成できそうです。
またWeb creators (ウェブクリエイターズ) 2008年 01月号 [雑誌]
| 投稿日 | 2007年12月10日 00:55 |
|---|---|
| カテゴリ | 設定 |
| タグ | ブラウザ | ライブラリ |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/977 |
コメント