※スマホ対応はしてません。

タグ: Chrome

DevToolsでz-index一覧できるやつ作ったよ。

カテゴリー: JavaScript

Chrome用とFirefox用です。

Download from Chrome Web Store Download Firefox add-ons

GitHubでソースコード公開してます。

見た目

Chrome版。

Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。

はじまり

コードスニペット版。これはこれで手軽でよろしいね。

Chrome版について

Elementsパネル内に “z-index” ペインを追加し、一覧を表示します。セレクターをクリックすると要素を選択するので、スタイルの詳細を確認できます。

ツールバーに追加されるアイコンはいらないので、右クリックから非表示にするのが良いと思います。

最初から出さないやり方もあるのかな。

Firefox版について

DevToolsに “z-index” パネルを追加し、一覧を表示します。セレクターをクリックするとInspector (Elements) パネルへ移動し要素を選択するので、スタイルの詳細を確認できます。たまに時間がかかることがあるけどよくわからない。

パネル vs ペイン

本当はChrome同様Elementsパネル内に表示したかったけど、できなかったので独立パネルになってます。

できなかった理由は二つあって、まず第一にペインにHTMLを追加するAPI setPage() がなかったこと。自由な項目が設置できない。

第二には、でもまあ見た目はアレだけどあんま気にしないにしよう思って、オブジェクトを表示する setExpression() を試した。ところが、これなんか中身が長いときにはみ出してスクロールもしないので、上位数件しか見えないっていう……。

setExpression() で出力した例。スクロールせず、全体を見ることができない。

何か良いやり方があれば教えてください。

今後の予定

更新の予定はないけど、脳内の構想としてはこんな感じ。

  • 要素をセレクターだけで検索するので、同じセレクターが複数あるとき選択が不正確なのを修正
  • スタックコンテキストとかも表示
  • style 属性で指定されている場合セレクターに反映
  • その場で z-index を更新してプレビュー(ElementsパネルのStylesペインみたいな)
  • アイコンとかそこら辺をアレする

気が向いたらやる感じです。欲しい機能あれば言ってくれると気が向いてくるかもしれません。

z-indexを減らそう!

ちゃんと設計してれば2桁もあれば相当余るはずなので、むやみに z-index: 999999 とか z-index: 2147483647 とかやめましょう。

よしCodeGridを読もう!

あとGitHubのほうでスターください!

ブラウザー拡張(アドオン、エクステンション)の作り方チュートリアル。

カテゴリー: JavaScript

思うところあって今後ちゃんと形にしようと思っているんだけど、その前に下書きというか叩き台くらいの感じで一度世に出してみます。

概要

  • すごいかんたん!
  • ビルドシステム類のない牧歌的構成でもいける
  • API互換性はそこそこ。ポリフィル入れてFirefoxに寄せて作るのが吉か
  • Edgeは闇を感じた
  • Safariは未調査

基本的な作り方

  1. フォルダを作る
  2. manifest.json を用意
  3. それに合わせて各種スクリプト等を用意
  4. ブラウザーで開発中のものを読み込み開発
  5. 公開

動く場所

  • ツールバーのボタン
  • 任意のサイト内
  • バックグラウンド
  • 独自ページ

他に開発者ツールにタブを追加したり、Firefoxならサイドバーを作ったりすることもできます。

できること

拡張用のAPIがいっぱいあるのでそれらを駆使する。

もちろん普通のウェブ開発の知見も再利用できるよ。

最新のJavaScriptを書ける

IE対応の必要がない(し、たぶんEdgeも無視されるだろう)ので、Chromeだけ、あるいはChromeとFirefoxだけが対象になります。すると最新のJavaScriptの書き方をがんがん使えます。

class とか async/await とか、関数引数の初期値とか分割代入とか。

そこら辺の勉強を兼ねて挑戦してみるのはきっと良い選択だと思います。

Hello Worldをインストールしてみる

最初のブラウザー拡張を自作するまえに、一度サンプルをインストールしてみましょう。どうせ自作したらやる作業です。

(さらに…)

IE7, IE8, IE9とかのダウンロードページまとめ。

カテゴリー: Web

全国のWeb屋さんは好むと好まざるとに関わらず、IEに対応するためにあれこれ環境を揃えたりしておられると思います。で、実際に環境をを作ろうとしてみたら各種IEのダウンロード先がバラバラでどこからダウンロードしていいかわからない……という経験もあるのではないでしょうか。

なんかもうそういうのが面倒なので、fuckin’ IEシリーズのダウンロード先をまとめておきます。

IE 9はWindows Vista/7専用です。XPでも使いたい方はこちらの記事をどうぞ:

IE以外のブラウザーは、だいたいトップページからダウンロードできます。せっかくなのでリンク張っておきますね。

あとついでなのでIE 10プレビュー版のダウンロード先も載せておきます。なおIE 10はVistaも駄目で、Windows 7専用です。

正式版になったら記事を修正してリストに追加する、かもしれません。

小さな文字は12pxまで!

カテゴリー: CSS

極小フォントによるデザインもあるとは思いますが、一般的なサイトを作る場合は12px以上のサイズにするのが良さそうです。

IE8の問題

IE8には、リンクにカーソルを乗せると文字サイズが変化する、というよくわからない不具合があります。

これってIE8のバグなんじゃね・・・?文字の大きさが勝手に変化するよ?|ぼくんちのTV 別館

この問題の一番嫌なところは、再現性がないところですね。なんかときどきなるんだけど、同じ事やってもならない。なんやねんこいつ。

ちなみに私の環境では、このページで再現しまくりです。

W3C CSS 検証サービス

元のサイズ

勝手に変わったサイズ(「简体中文」に注目)

W3Cの検証サービスをおかしくするとはさすがIE、やりますな。

Chromeの問題

Chromeでは文字サイズは10pxより小さなものを指定できないようです。指定しても10pxにまとめられてしまいます。

(さらに…)