iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ

iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。

いろいろ試しましたが、行き着いた回避策は2つ

  1. fixedを諦める
  2. overflow-scrolling: touch;の慣性スクロールを諦める

いずれかでした。

“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ”の続きを読む

package.jsonのscriptsでローカルインストールしたgulpでtaskを実行

執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが
ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。

gulp4をローカルインストールすると、package.jsonの記述はこのようになります。

    "gulp": "github:gulpjs/gulp#4.0",

ですが、このまま普通に gulp コマンドでdefaultのタスクを実行すると
ローカルインストールしたgulp4ではなく、グローバルインストールしてあるほうのgulpでタスクが実行されてしまいます。

“package.jsonのscriptsでローカルインストールしたgulpでtaskを実行”の続きを読む

gulp4でTypeErrorがでるときはgulp-cliが原因

gulp4を使用しているプロジェクトをnpm installから展開し、gulpのdefaultタスクを実行しようとすると
このようなエラーがでました。

$ gulp
[xx:xx:24xx Using gulpfile /xxx/gulpfile.js
/Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Function.Module.runMain (module.js:577:11)
    at startup (node.js:160:18)
    at node.js:445:3

調べてみると、gulp4とgulp-cliのバージョンが噛み合わないと出るエラーだと判明。

$ gulp -v
[XX:XX:XX] CLI version 3.9.1
[XX:XX:XX] Local version 4.0.0-alpha.2

とりあえず、gulp-cliのバージョンを上げてみました。

$ sudo npm install -g gulp-cli
$ gulp -v
[xx:xx:xx] CLI version 1.3.0
[xx:xx:xx] Local version 4.0.0-alpha.2

これで解決。
gulpのタスクも実行できるようになりました。

$ gulp
[xx:xx:xx] Using gulpfile /xx/gulpfile.js
[xx:xx:xx] Starting 'default'...

JavaScriptでカラーコードをHEX(16進数)/RGB変換

HEX(#ff000などの16進数カラーコード)をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。

See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0

HEX→RGB

HEXは、R2桁+G2桁+B2桁が集合した6桁なので
この手順でRGBに変換できます。

  1. substringで2桁ずつ3つに分解
  2. parseIntで16進数から10進数に変換

RGB→HEX

HEXからRGBの逆パターンです。

  1. R,G,Bそれぞれの値をparseIntで10進数から16進数に変換
  2. 6桁に結合

Internet Explorer 11の開発者ツールでウィンドウサイズ指定

InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。

意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。

調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。

前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。

“Internet Explorer 11の開発者ツールでウィンドウサイズ指定”の続きを読む

Internet Explorer では HTML5の main タグが使えない

極論から。
InternetExplorerではHTML5の<main>タグは使えません。

検索するとたくさん該当するのが
IEはデフォルトで<main>タグをinline要素として認識するから、CSSが意図したように適用できないという情報です。
そのため、このようなCSSを追加れば<main>も使えるようになると…

main {
	display: block;
}

そうだと信じてたんです。
しかし、ある人のIEではこのスタイルすらも完全スルーされることが判明。
ガーン!

“Internet Explorer では HTML5の main タグが使えない”の続きを読む

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが
「&(&amp;)」「>(&gt;)」などの特殊文字はコードのまま出力されてしまいます。

contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。

  • & → \
  • # → 0
  • x → 0

「>」の記号をCSSの擬似要素で表示

「>」の参照はこうなります

  • 文字参照 → &gt;
  • 10進数の数値参照 → &#62;
  • 16進数の数値参照 → &#x003E;

16進数の数値参照 &#x003E; の記号を置換します。

  • &#x003E; → \00003E

これをCSSのcontentに設定。

// > を挿入
.btn_next::after {
	content: '\00003E';
}

ボタンに>>をスタイルで表示するサンプル

See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0

gulpでshift_jisとCR+LFの開発環境を構築

gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。

gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ

  1. SassはCSS1行目の@charsetをUTF-8と固定出力してしまう
  2. Browsersyncはshift_jisが文字化けする
  3. jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない
  4. 画像までshift_jis変換すると化ける

まずは

と対処した上で
ポイントには、このように対応してみました。

サンプルをGitHubで確認

“gulpでshift_jisとCR+LFの開発環境を構築”の続きを読む

XcodeのライセンスらしきメッセージでGitのcloneが実行できない

Gitのクローンを実行しようとすると、このようなメッセージで止まってしまい実行できない事が。


Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

この場合、Xcodeを起動してライセンスに同意するとOKです。
「Agree」ボタンを押すとインストールが始まります。

Gitのcloneが行えるようになりました。