Dialog と Popover #1 | blog.jxck.io
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
paged.jsで作るPagedMedia帳票 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 帳票、契約書などのビジネス文書をページ化メディアで印刷するまでのロードマップ。 Paged Media Paged MediaとはCSS3のページ化メディア= 版物の用紙サイズ、ふち、改ページなどのスタイルを指定するためのど真ん中の仕様セット。 ページ化メディアとかページ組版とかPaged Mediaとか、いかにも専門チックな用語が登場するが、ページ概念のあるスタイルセットという理解でOK。 しかしながら、いま現在もメジャーブラウザの対応状況はまちまちだそうで、ブラウザ互換性という意味で安定していないようだ。 ライブプレビュー それでも
混合状態のチェックボックス - ARIA-Barriers
@nishimotz です。 ウェブアクセシビリティLT＆交流会 vol.4 に参加して、交流会で話したことを、あとで気になって調べてみたのが今回の記事です。 混合状態(部分的にチェック済み)のチェックボックスは、あるオプションが複数のサブオプションを統括しているような場合に便利な UI 要素です。 しかし、アクセシビリティを確保するためには、適切な実装が必要だとされています。 さて、どうしたらいいのでしょうか。 APGの実装 ARIA Authoring Practices Guide (APG) Checkbox Example (Mixed-State) の実装を見てみましょう。 テキストだけ日本語に翻訳しました。 <fieldset class="checkbox-mixed"> <legend> サンドイッチの具材 </legend> <div role="checkbox" c
Chrome, Edge バージョン128 css zoom標準化のメモ書き - Qiita
はじめに ChromeやEdgeのバージョンが128に更新された時、 縦スクロール固定、横スクロールは動的に動かしている要素の位置がずれた。 状況 cssのzoomプロパティが適用されたdiv要素の子要素に対して、 縦スクロールはposition:fixedで固定されるけど 横移動した時に位置を動的に動かすために jQueryのoffset().leftで絶対位置を取得してスクロールしたpxと引き算して動かすということをしていた。 jQueryのバージョンはv1.12.4とかなり古い... 原因 Chromeのバージョンが127から128に変わった時に、 cssのzoomが標準化されて、それに合わせてjavascriptのAPIが色々変更されたらしい。 リリースノート API影響 iframe コンテンツ ドキュメントに適用するズームを変更する 継承されたすべての長さのプロパティに適用され
MDN のローカライズにおける課題へのアプローチを考える - Qiita
日本語記事の見出し ID が日本語になってしまっています！ を思い出してください。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#specifications こんな URL があったとき、en-US の部分を ja にするだけで目的の箇所にページ内リンクして欲しいですよね。しかし、現状の設計だとそれが不可能になってしまっているのです。ID が翻訳されてしまっているがために。 見出し語のローカライズ問題 ローカライズ版では、見出しはベタ書きで訳語を記述しています。前述の通り Specifications に対応する見出しとして 仕様書 と書いています。しかし、これが 仕様 になっていたりするページもあるのです。 そう、辞書ファイルを用意して翻訳するというアプローチを採っていないがために、
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる Chrome 126・Edge 126（2024年6月）、Safa
コンポーネントごとに考えるアクセシビリティ - Qiita Advent Calendar 2023 - Qiita
はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ！💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞：【完走賞ゲットだぜ！】CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
MDN は Wiki から GitHub 管理に変わって編集の敷居は高くなったのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。MDN が Wiki プラットフォームだった頃から記事を編集したりしてきました。 今日は、現在の GitHub 管理されている MDN の編集に参加するのは敷居が高いのかどうかについて考えていきたいと思います。 MDN が Wiki だった頃 2020 年 12 月 14 日より、MDN は GitHub ベースの新しい Yari プラットフォームで運用しています。それまでは 2012 年 8 月
MDNとかをみんなで編集！翻訳！ - Qiita Advent Calendar 2023 - Qiita
オープン Web の開発者向けドキュメント MDN Web Docs には、Web アプリ開発に役立つノウハウなど、英語ドキュメントが日々どんどん追加されていっています。ただそのぶんドキュメントの日本語化(l10n=localization)は後手後手になっています。 新しいウェブ技術やウェブ標準に興味ある 翻訳に興味あるけど、どうしたらいいか分からない 英語は苦手だけど、日本語の文書を読みやすくするとかならできるかな Mozilla のコミュニティ活動に参加してみたい フォクすけに萌える MDN を翻訳してきたけど最近ご無沙汰気味 などなど、色々な方面からの参加をお待ちしています。 参考情報: みんなで編集！翻訳！カレンダー 2021 みんなで編集！翻訳！カレンダー 2020 みんなで編集！翻訳！カレンダー 2019 みんなで編集！翻訳！カレンダー 2018 MDN Web Docs ド
What forces layout/reflow. The comprehensive list.
what-forces-layout.md What forces layout / reflow All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck. Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for a
MDN Plus
//////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../../ ../../<></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> Go ads freeEnjoy MDN ads-f
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
【解決方法】iOS Safari で JavaScript からCSS変数を取得できない - Qiita
2022年4月12日追記 iOS のバージョンを最新版の 15.4.1 にアップデートしたところ iPad （第9世代）以外は取得できました。 iPad （第9世代）は古いから取得できないんでしょうかね… CSS変数の定義はメディアクエリ内で行わないほうがよさそうです。 取得できた iPhone XR 15.4.1 Safari iPhone X 15.4.1 Safari iPad Pro （9.7インチ） 15.4.1 Safari 取得できない iPad （第9世代） 15.3.1 Safari 現象 JavaScript から算出されたCSS変数を取得しようとすると iOS Safari だけ取得できない… 取得できた Windows Firefox 99.0 Google Chrome 100.0.4896.75 Microsoft Edge 100.0.1185.36 Andr
JavaScript screen.width screen.height
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーの角丸へのこだわりに応えよう【HTML/CSS/JavaScript編】 - Qiita
Get computed value of CSS variable that uses an expression like calc
Web Inspector