Building a dialog component | Articles | web.dev
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
Firefox を使ってみよう
Firefox ブラウザー Developer Edition ご愛用いただいているブラウザーが新しくなりました。自由なウェブを築くために必要とされる最新機能や高速パフォーマンス、開発ツールを、ぜひ入手してください。
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
jQueryでHTML5の独自データ属性（data Attributes）を扱う
Posted: 2011.07.01 / Category: HTML&CSS, javascript / Tag: HTML5, jQuery HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッ
PHPのイタい入門書を読んでAjaxのXSSについて検討した(1) - ockeghem's blog
このエントリでは、あるPHPの入門書を題材として、Ajaxアプリケーションの脆弱性について検討します。全3回となる予定です。 このエントリを書いたきっかけ twitterからタレコミをちょうだいして、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeという本を読みました。所感は以下の通りです。 タレコミ氏の主張のように、本書はセキュリティを一切考慮していない 主な脆弱性は、XSS、SQLインジェクション、任意のサーバーサイド・スクリプト実行（アップロード経由）、メールヘッダインジェクション等 脆弱性以前の問題としてサンプルスクリプトの品質が低い。デバッグしないと動かないスクリプトが多数あった 上記に関連して、流用元のソースやデバッグ用のalertなどがコメントとして残っていて痛々しい 今時この水準はないわーと思いました。以前
プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
