スタイルをカスタマイズ可能な新しい `<select>` 要素
Note 2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発
フォーム入力不備の情報提示 (スクリーンリーダーのユーザーにも伝わるように) | Accessible & Usable
公開日 : 2015年4月7日 カテゴリー : アクセシビリティ / ユーザビリティ ウェブサイトのフォームで、入力に不備がある場合、問題となっている箇所および修正方法をユーザーに提示する必要があります。そのような情報は当然ながら、支援技術 (スクリーンリーダーなど) のユーザーにも伝わらなければなりません。 WCAG 2.0 / JIS X8341-3:2010 では、以下の規定があります。 入力エラーが自動的に発見された場合は、エラーとなっている箇所を特定し、そのエラーをテキストで説明しなければならない。 出典 : JIS X8341-3:2010「7.3.1.1 入力エラー箇所の特定に関する達成基準」(等級A) 入力エラーが自動的に発見された場合は、その修正方法が明らかであれば、その方法を利用者に提示しなければならない。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。 出
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
Windows：PowerAutomate Desktopをインストールして使ってみる
すげーのが出たぞーーー 誰よりも早く触って記事にしてみたかったので書きなぐってみた。 概要 PowerAutomate Desktopとは MS謹製のRPAツール。全てのRPA製品を過去にするかもしれないやべーやつ。 ついさっき(2021/03/02 23:00くらい)に発表されたばっかり。 インストールしてみる １. MSのサイトにアクセス インストーラをダウンロード インストーラを実行→[次へ]をクリック 同意して[インストール]をクリック インストール完了 起動→利用開始 [サインイン]をクリック メールアドレスを入力 アカウントを選択 完了 作成画面を確認してみる フロー名を入力 別窓が出てきた ...なんか色々項目多くない？ ざっくり確認してみた 変数 条件 ループ 遅延 システム ファイル フォルダー 圧縮 UI オートメーション UI オートメーション-Windows UI
GUIアプリケーションのバージョニングどうする問題（あるいはメジャーバージョン上げられない問題） - ナカザンドットネット
結論 SemVer GUIアプリケーションとSemVer メジャーバージョン上げられない問題 SemVerではない運用 バージョニングは誰のために まとめ 皆さん、リリースしてますか！ いいですよね、リリース。（雑な導入） GUIアプリケーション（Webアプリやモバイルアプリ）のバージョン番号をどうやって決めるか（バージョニング）を迷ってしまったので、考えていることを一度吐き出してみることにしました。 結論 結論からいうと、GUIアプリケーションのバージョニングはSemVerにこだわる必要はないです。サービスを提供する主体として、開発するチームとして、そのバージョン表記によって誰に何を伝えたいのかがハッキリしていて、それが伝えたい人々に伝われば、何だっていいです。 SemVer 現代のWeb界隈でデファクトスタンダードなバージョン記法といえば、セマンティックバージョニング（通称SemVer
なぜChromeはURLを殺そうとするのか？ (Chrome Dev Summit 2019) - ぼちぼち日記
今年もChrome開発者の集まりChrome Dev Summit 2019 (CDS) がサンフランシスコで開催されました。 今回、私が Chrome Customer Advisory Board (CAB) に選出していただいたこともあり、CDSに初めて参加しました。 これは、CDS終了後のCAB meetingで頂いたChrome Dinosaurフィギュアです。ちなみにゲームはできません。 タイトルの「なぜChromeはURLを殺そうとするのか？」は、2日目Chrome Leadsのパネルセッションで司会のGooglerが、Chrome UX担当のProduct Managerに対して一番最初に投げかけた問いです。 PMは直ちに「そんなことはしない」と即答しました。しかしChromeは、URLの表示領域からHTTPSの緑色表示の廃止・EV表示場所の移動・wwwサブドメイン表示の削
TensorFlow.jsがChromeでWebWorker上でもWebGL backendで動く - すぎゃーんメモ
tensorflow.js は処理の重さ的に worker で動かしたいのだがまだ WebWorker で動かすと cpu backend に fallback してしまうので、この issue ずっとみてる https://t.co/KYGEQSFwq5— 無糖派層 (@mizchi) July 30, 2019 僕も以前にWebWorker上でTensorFlow.jsを使おうとして WebGL backendで動かないことに気付いて諦めていたのだった。 memo.sugyan.com …と思っていたのだけど、どうも先月くらいの @tensorflow/tfjs@1.2.2 あたりから ChromeではOffscreenCanvasというのを使ってWebWorker上でもWebGL backendで動くようになったようだ。 試してみたところでは 動くのはChromeのみで、Safari
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) | メルカリエンジニアリング
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD 改善・その他社内の生産性を上げるための自動化を行っています。 今回は、最近私たちが行なっているメルカリWeb版のUIテスト自動化と、その自動テスト環境についてご紹介したいと思います。 メルカリWeb版のUIテスト自動化について UI自動テスト環境に関する課題 Selenium Grid を Azure Kubernetes Service(AKS) 上で構築する Zaleniumを試す Azure Kubernetes Service(AKS)で受け
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
scroll-snapとscroll-behaviorで実現できることを解説するよ | ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
Web制作 記事公開日：2018/02/19 「CSS Scroll Snap Module」とscroll-behaviorというプロパティで何ができるかという声を聞きました。使い方がちゃんと用意されているので解説します。 scroll-behaviorプロパティは、CSS Object Model (CSSOM)という現在策定されている新しいCSSプロパティの1つになります。CSS Object Model (CSSOM)は、2016 年3月17日にW3CのWorking Draftとなっています。 CSS Object Model (CSSOM) のscroll-behaviorプロパティでできることは、一言で言うと、「スムーススクロールがCSSでできる」ということです。 従来はページ内リンクをどうさせると、アニメーションも何もなくいきなり移動してしまいました。この挙動はユーザーが戸
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
Unblocking clipboard access | Articles | web.dev
Unblocking clipboard access Stay organized with collections Save and categorize content based on your preferences. The traditional way of getting access to the system clipboard was via document.execCommand() for clipboard interactions. Though widely supported, this method of cutting and pasting came at a cost: clipboard access was synchronous, and could only read and write to the DOM. That's fine
Customize media notifications and handle playlists | Blog | Chrome for Developers
With the brand new Media Session API, you can now customize media notifications by providing metadata for the media your web app is playing. It also allows you to handle media related events such as seeking or track changing which may come from notifications or media keys. Excited? Try out the official Media Session samples. The Media Session API is supported in Chrome 57 (beta in February 2017, s
Redesigning Chrome Desktop
In the beginning of September 2016, the new Chrome Core UI redesign, or so called “Chrome MD” (for Material design), rolled out on Windows as part of our 53rd update. It is the last step of a three phase deployment of the new design,which started in 51 with Chrome OS and Linux, followed by macOS in 52. Windows is the culmination of that process and while Chrome is never finished, it felt to me lik
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
dialog element - modals made easy | Blog | Chrome for Developers
Chrome Canary has landed support for the dialog element behind a flag. The dialog element can be used for popups in a web page. show(): Open dialog. close(): Close dialog. Takes an optional argument which if present dialog.returnValue is set to. showModal(): Open modal dialog. ::backdrop: Pseudo-element to style background behind a modal dialog. close event: Fired when a dialog is closed. Update o
Focus transition
Playground Placebo button Why? Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent. How? Flying Focus creates an element that is moving when the focus event happens. outline: 5px auto -webkit-focus-ring-color makes the element look like it has a focus. It only works in Safari and Chrome. Firefox does
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
