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

カテゴリー: CSS

Edgeでiframe内でウェブフォントが使えないかもしれない問題を踏んだ。

カテゴリー: CSS

最近踏んだ問題です。

  • Edge
  • 複数の <iframe>
  • フレームは同時に生成
  • 同じウェブフォントを読み込む
  • 一部のフレームでしかウェブフォントが出てこない

デモとコードはこちら。

3つのフレームのうちひとつでしかウェブフォントが有効化されてない様子。

EdgeのDevToolsでネットワーク見てると、CSSファイルは読み込まれているけどフォントファイルは読み込まれていない、という状況までは観測できた。

解決策

どうやらCSSファイルの読み込み完了を待ってから、そのウェブフォントを利用する部分を出力すると問題なくなる様子。

つまり onload で待つべしと。

const elLink = document.createElement('link');
elLink.href = `https://fonts.googleapis.com/css?family=${family}`;
elLink.rel = 'stylesheet';

elLink.onload = () => render(); // <---

document.body.appendChild(elLink);

原因はっきりわかってないけどこれでうまく行っているように見える。

処理の想像。

  1. フレーム1出力開始
    1. CSSファイル読み込み開始
    2. ウェブフォント利用のテキスト出力
    3. 該当フォントなしとして記憶 (A-1)
  2. フレーム2出力開始
    1. CSSファイル読み込み開始
    2. ウェブフォント利用のテキスト出力
    3. 該当フォントなしとして記憶 (A-2)
  3. いずれかのフレームで
    1. CSSファイル読み込み完了 (B)
    2. 該当なしのフォントに合致、フォントファイル読み込み開始 (C)
    3. フォントファイル読み込み完了
    4. テキスト再描画

このB前にAが来るとCがちゃんと動いてない気がします。知らんけど。

Edge…

老い先短いEdgeHTMLさんのためにどれだけコストかけるべきか悩む。

おまけ

おまけ2

CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。

カテゴリー: CSS

というわけでお探しの完全理解はこちらです。

スマホでも存分にご理解頂けます。

見た目

こんな感じ。

この動画だけでも十分理解できそう。

matrix() とは

動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。

(さらに…)

ヘッダー、フッターの固定にposition:sticky使うとCSSだけで完結するし良いかも。

カテゴリー: CSS

というわけで、いまさら初めて使いました。

デモ

フッターも追加したよ。

使い方

.sticky-header {
  background-color: #fff;
  position: sticky;
  top: 0;
}

position: sticky にして、位置と背景色の指定も併せて行う。背景色がないと見えちゃうから。

position: fixed と違ってサイズ分の余白を自前で用意する必要がないのがらくちん。

利用可能状況

IE以外で使える。大丈夫そうだ。

一通りのウェブブラウザで利用可能。(Can I useより。)

table 関係が現行版だとちょっとまだアレっぽいけど、今回の目的には関係ない。

と思いました

思いつきなので細かいとこ調べてないや許して。スタック文脈とか絡んでくるときっと面倒くさそうな予感がする。

本来は長いコンテンツにたくさんの見出しがあって、みたいな場合に使うものだと思うんだけど、単純に上下端に固定する目的で使うのも悪くないんではないだろうか。だめです?

参考

「フロントエンドエンジニア養成読本」を読んで、エンジニアになってよ!

カテゴリー: CSS, JavaScript, Web

著者の方々から頂いておりましたので、遅まきながらご紹介さして頂きたいと思います。

(すみません、半年近く経ってしまいました……。)

概要

  • ウェブのクライアント側の濃い技術がたっぷり
  • UXの話からブラウザーの仕組みまで
  • 難易度は高め、だけどそこまで高くはない
  • 全てを理解できなくても、勉強の指針として目次を頭に入れておくと良さそう
  • ツール解説は特になし
  • 「10年先も役立つ力をつくる」は本当だと思う

    (さらに…)