フロントエンドBlog
Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
あのWAI-ARIAがIDL属性として実装される！？
みなさんこんにちは！UI開発者の宇賀です。
昨夜Twitterをぼーっと眺めていましたら、非常に興味深いニュースが飛び込んできました。
Accessible Rich Internet Applications 1.2 suite published, by Joanmarie Diggs https://t.co/j9ivdFW74E
— W3C (@w3c) 2018年7月19日
WAI-ARIA 1.2の草案が先日公開されたとのこと。何が変わったのか気になりますよね...！早速見ていきましょう！
WAI-ARIA 1.1の勧告から変更点についてを見てみると、次のように書かれていました。
デバイスやネットワークに合わせたWebサイトの構築
スマートデバイスのブラウザでWebサイトを閲覧している時、意図しないタイミングでブラウザが閉じてしまうことはないでしょうか？
これはWebサイトに限らずアプリでも同じことが言えますが、デバイスへの負荷が多いWebサイトではメモリ使用量やデバイス状況に応じてセーフティが働き、ブラウザを強制終了します。
もし管理/運営しているWebサイトでそのような事象が起きてしまった場合、ユーザーはどのように感じるでしょうか？
最初は何らかの不具合と思うかもしれませんが、何度も不具合が続くとWebサイトへの信頼が落ちてしまい、最悪の場合、二度と訪れない可能性も考えられます。
このような事象を未然に防ぐ方法としてWebサイトのパフォーマンスチューニングは勿論必須になりますが、昨今のブラウザから得られる情報はとても多く、デバイスに搭載されているメモリの量やCPUのコア数を把握することができるので、デバイスの処理能力に合わせて挙動を変更することが有効です。
今回はnavigatorオブジェクトを主に搭載されているAPIとネットワークを含めたデバイス情報を取得する方法をご紹介します。
記述次第でAutoprefixerいらず？！CSS Grid LayoutのIE11対応方法と未サポートブラウザのフォールバック例
CSS Grid Layoutはグリッドレイアウトを実装するのに非常に便利なプロパティですが、案件で用いる際に頭を悩ませるのがブラウザのサポート状況ではないでしょうか。
2018年6月現在、世界的に見て84％のブラウザがCSS Grid Layoutをサポートしており、モダンブラウザと位置付けられているブラウザ（Edge、Chrome、Firefox、Opera、Safari、iOS Safariなど）ではすべて実装することができます。しかし、局所的な観点から見ると日本において依然シェアがあるIE11はIE10からの古い仕様でCSS Grid Layoutが実装されており、アフリカでシェア率が高いOpera miniや主に中国などで使われているQQブラウザ、Baiduなどは未サポートです。
特に日本ではIE11を開発対象から外しづらい傾向にあるため、CSS Grid Layoutの実務での導入はためらいがちですが、対応のポイントをしっかりとおさえておけば充分用いることができます。
ブラウザを自動的にリロードするいくつかの方法
AIやRPAが一躍脚光を浴び「自動化」というキーワードをよく目にするようになりました。
Web制作でも自動化できることが沢山ありますが、その代表ともいっていいのが「ブラウザの自動リロード」ではないでしょうか。
ブラウザに移動し手動でリロードするのはとても手間ですし、非効率です。
手動でリロードするのにかかる時間を1回0.1秒として、1日100回リロードしているとしたら、1日に10秒、1ヵ月間で3分20秒、1年間では40分もかかってしまいます。
たかが、0.1秒されど0.1秒です。
未だにファイルを更新するたびにエディタからブラウザへ行き来しているという方は、今日で卒業しましょう。
今回の記事ではブラウザを自動リロードする方法をいくつかまとめてみましたので、気に入った方法があれば活用してみてください。
CSSが効かない！？fieldset要素でも簡単にテーブルレイアウトを実現できるdisplay: contents;
みなさんこんにちは！UI開発者の宇賀です。
いつもご愛読ありがとうございます！
お申し込みやお問い合わせ画面などで、入力フォームはコーポレートサイトだけでなくBtoCのコンテンツでも度々見かけますよね。
フォーム関連要素であるfieldset要素はコンテンツカテゴリ名の通り、フォームを実装するときに度々登場する要素の1つですが、スタイリング時にクセのある要素としても有名です。
今回は、そんなfieldset要素のスタイリングに最近話題のdisplay: contents;を利用してみようというお話です。
fieldset要素の具体的な利用方法については、以前公開された記事をご参照いただければと思います。