HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになります
先日、HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになりました。この変更は6/25にリリースされたChrome 138やFirefox 140をはじめ、Edge, Safariも次のバージョンでサポートされる予定です。 この変更は主に、XSS脆弱性の防止に役立ちます。Web制作者に与える影響と潜在的な問題について紹介します。 HTML spec change: escaping < and > in attributes 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 変更点 変わらなかった点 何が壊れないのか 何が壊れるのか 終わりに はじめに 2025年5月20日にHTMLの仕様が変更され、属性内の<と>がエスケープされるようになりました。これによ
HTML の img 要素と image タグ: Days on the Moon
この記事は HTML アドベントカレンダーの 20 日目の分、兼 JavaScript アドベントカレンダーの 20 日目の分です。 HTML のタグといえば、要素の開始位置、終了位置、そして属性を指定する記述のことですね。開始タグは小なり記号 (<) の後に要素名が続きます。しかしながら、タグに既述した名前とは別の名前の要素が生成される場合があります。 以下の JavaScript コードを実行すると、JavaScript コンソールには (IMAGE ではなく) IMG と出力されます。タグに記述された名前は image なのに、img 要素が生成されているのです。 const div = document.createElement('div'); div.innerHTML = '<image src="" alt="">'; console.log(div.firstChild.
CSSとJavaScriptのインライン化
CSSやJavaScriptをインライン化してみている。速い。ラスター画像もBase64で埋め込めみたくなる。しかしインライン化はやはり気持ちが悪く、落ち着かない。この気持ち悪さはウェブサイトと言う単位に意味が薄くなってしまうことにあるのではないか。 ウェブサイトは全体で一冊の本になっているようなイメージが漠然とある。フレーム全盛期を体験していることが大きい。このイメージではそれぞれのウェブページはその本のページにあたり、それぞれから参照されるCSSやJavaScriptファイルはそのページ群を留める接着剤やひもにあたる。それらをインライン化してしまうと、本のページそれぞれを切り離し、ペラペラな紙にしてしまっているような印象を持ってしまう。 実際にはそれぞれのウェブページは半ば独立したもので、ユーザーからも様々なウェブサービスからもそう扱われるようになって久しい。直帰率が限りなく100%に
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015 マイクロソフトが米サンフランシスコで開催中のイベント「Build 2015」。2日目の基調講演では、iOSやAndroid、Windows 10などクロスプラットフォーム対応のアプリケーションを一括で生成するツール「ManifoldJS」を発表しました。 マイクロソフト チーフエヴァンジェリストのスティーブ・グッゲンハイマー氏。「Windows対応だけではなく、クロスプラットフォーム対応のアプリケーションをどう作ればいいのかとよく聞かれる。2年前、われわれはゲーム向けにUnityを発表し、昨年はiOSとAndroid対応でXamarinの採用を発表した。今年はWebアプリケーションにフォーカスしよう」
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
JavaScript が無効なユーザーはほとんどいない。だから... | Accessible & Usable
公開日 : 2013年12月27日 (2014年3月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 「Web ユーザーのうち、JavaScript を無効にしている人はどのくらいいるのだろうか？」という話題は、Web サイトの制作や運営に関わる人の間では、以前から関心の高いところだと思います。海外でもこの話題を扱った記事は多く、Web 上で検索してみると、いろいろな記事が見つかります。 How many people browse with Javascript disabled? How many people are missing out on JavaScript enhancement? (イギリス政府「Government Digital Service」の記事) How many users have JavaScript disabled? (「Yaho
モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
【GDC 2013 Vol.33】HTML5+JavaScriptで容易にWii Uでのゲーム・アプリ開発が可能に・・・「任天堂ウェブフレームワーク」発表 / GameBusiness.jp
今回のGDCで任天堂は2つの開発者向けセッションを予定。最初に行われたのは「Nintendo Wii U Application Development with HTML and JavaScript」(HTMLとJavaScriptを使ったWii Uアプリケーション開発)と題したセッション。講師は任天堂の環境制作部の島田健嗣氏です。 Wii Uの最大の特徴であるWii U GamePadは、手元にある第2のスクリーンとして、テレビ画面と連携することによって、多くの人々と体験を共有しながら、操作性の良さを同時に実現することができます。任天堂は昨年末の発売から、ゲームソフトだけでなく、『YouTube』や『ニコニコ動画』、あるいは『Wii Street U』といったアプリケーションをリリースしてきました。これらは元々、ウェブサービスとして提供されているものですが、リビングでの体験へと変化
新しくなるappCacheとtemplateでWebアプリケーションの作り方が変わる
WebComponents仕様の一部として議論されているテンプレートの機能は、Ajaxが登場したときのようにWebアプリケーションを変えていくだろう。W3Cのマイケル・スミス（Michael Smith）氏は2月18日に都内で開催された「第36回HTML5とか勉強」でそう説明し、HTML5.1に相当する議論中の新機能への期待を示しました。 先週紹介した「オフラインファーストの思想と実践」の前に行われたスミス氏のセッション「勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり」の内容をダイジェストで紹介しましょう。 新しくなるアプリケーションキャッシュ マイケル・スミス氏。今日はappCacheとtemplateと、HTML5のテストをgithub上に置き始めた、などの話をします。 アプリケーションキャッシュ（appCache）はご存じですか？ HTML5でオフラインアプリ
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
Cinnamon.js: Find In-Page Text using Synonyms | Thomas Park
A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead. Cinnamon.js prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-i
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022
Safe DOM manipulation with the Sanitizer API | Articles | web.dev
Hexagons grid - responsive
NameBright - Coming Soon
hanatoweb.jp
Site Under Maintenance
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS
