ユーザースタイルシートでChrome風ステータス表示
Chrome風なステータスバー表示をするSafari拡張が何種類か出ているみたいですが(どれもText URL Linkerと相性が悪く…)、CSSだけで大体実現できそうだなと思い、試してみました(Text URL Linkerとの相性が良いので)。
このスタイルはサイトによって、リンクがクリックできなくなるなどの不具合を起こす可能性があります。ご了承を。
@namespace url(http://www.w3.org/1999/xhtml); a[href]:hover:before{ content:attr(href) !important; display:inline-block !important; position:fixed !important; left:0px !important; background:#ccc !important; height: 1.5em !important; line-height:1.5em !important; border-top:1px solid #444 !important; border-right:1px solid #444 !important; border-bottom:none !important; border-left:none !important; max-width: 90% !important; z-index:100000 !important; font-size:12px !important; color:#000 !important; font-weight:normal; padding:2px 8px !important; margin:0px !important; text-decoration:none !important; border:none !important; overflow:hidden !important; text-align: left !important; text-shadow: rgba(254,255,255,0.5) 0px 1px 0 !important; font-family: 'Lucida Grande', Verdana, sans-serif !important; -moz-border-radius-topright:4px; border-top-right-radius:4px; bottom:0px !important; opacity:0.9 !important; } a[href][target]:hover:before{ content:attr(href) ' @target="' attr(target) '"' !important; }
とりあえず、Firefoxだとこんな感じに。
Safariだとなぜかアンダーラインが消えない…。Chromeも同様でした。バグ、なのかなぁ。
と、これだけ見ると上手くいっている感じですが、相対パスで記述されているリンクでは、そのまま相対パスで表示してしまいます。まあ、個人的にはこれはこれで(同じサイト内のリンクだと一目でわかるので)ありのように思いますが。
ユーザースタイルシートとして読み込むだけなので、拡張を有効にしていないSafariや、Operaなどでも使えます。
ちなみに、ChromeもChrome6ではデフォルトで、Chrome5では起動オプションで--enable-user-stylesheetを指定することでユーザースタイルシートを使えます(Issue 2393 -
chromium -
Support user stylesheet -
An open-source browser project to help move the web forward. - Google Project Hosting
)。
CSSは
css statusbar - userstyles.org
( http://userstyles.org/styles/31527.css )にアップしたのでご自由にどうぞ。特定の拡張子、文字列を含むときにスタイルを変えたりとか、結構応用できるかも。