すべての主要ブラウザで利用可能になったアットルール@starting-styleとは

2024/08/12 52 users プロパ すべて CSS プロパティ 利用 要素

本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。 トランジション開始時のスタイルを指定できる @starting-style @starting-style はトランジションされる要素に対して、CSS プロパティの開始値を定義するためのプロパ... 続きを読む

「0.0.0.0」へのアクセスを悪用してローカル環境に侵入できる脆弱性「0.0.0.0 Day」が発見される

2024/08/08 207 users day 脆弱性 ローカル環境 Firefox アクセス

Chrome、FireFox、Safariといった主要ブラウザにおけるIPアドレス「0.0.0.0」の扱い方に問題があり、問題を悪用することで攻撃者が攻撃対象のローカル環境にアクセスできることが明らかになりました。問題を発見したセキュリティ企業のOligo Securityは、この脆弱(ぜいじゃく)性を「0.0.0.0 Day」と名付けて注意喚起して... 続きを読む

ESModules プラットフォームとエコシステムの狭間で | poteboy

2024/07/08 10 users ESModules 狭間 rollup Webpack 一定

一定の規模以上のWebアプリケーションにおいて、JavaScriptを開発時のままの形で配信することは滅多にありません。webpackやRollupなどのバンドラを使用して、ファイルをまとめた上で配信することが一般的です。 ESModulesが普及しバンドル工程なしでも主要ブラウザがJavaScriptのモジュールを直接解釈できるようにはな... 続きを読む

WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方

2024/03/14 17 users Has Firefox CSS 疑似クラス 特定

CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました... 続きを読む

朗報！ これでCSSネストの記述方法がより簡単になります

2023/11/22 16 users CSSネスト 朗報 Relax 構文 記述方法

2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定のChrome 120で、CSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になるので紹介します。 CSS nesting relax... 続きを読む

たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！ CSSのサブグリッド（subgrid）の基礎知識と使い方

2023/10/12 138 users subgrid Safari CSS Firefox 一行

CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッ... 続きを読む

CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます

2023/10/04 19 users subgrid CSS 見出し テキスト ブラウザ

先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（... 続きを読む

これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック

2023/04/17 163 users CSS 三角関数 レイアウト ヘッダ テクニック

ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？ CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です... 続きを読む

2023年4月においてクリックジャッキング未対策のサイトはどの条件で被害を受けるか

2023/04/03 192 users 被害 localStorage 条件 クリックジャッキング

サマリ CookieやlocalStorage等でセッション管理しているウェブサイトがクリックジャッキング対策していない場合、どの条件で被害を受けるかを説明する。SameSite属性のないCookieでセッション管理しているウェブサイトは、主要ブラウザのデフォルト設定ではクリックジャッキングの影響を受けない。一方、loaclStorageに... 続きを読む

Firefox 111、Webアプリからローカルファイルにアクセスできる「Origin Private File System」が正式機能に。これでChrome、Safari、Firefoxが対応

2023/03/19 10 users アプリケーション Safari ChromeとSafari

3月14日にリリースされたFirefox 111の新機能として、Webブラウザ上のアプリケーションからローカルファイルにアクセスできる「Origin Private File System」が正式に搭載されたことが明らかになりました。 すでにChromeとSafariではOrigin Private File System機能が搭載されているため、これで主要ブラウザでこの機能... 続きを読む

2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！

2023/01/10 164 users cos tan Sin CSS 三角関数

2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数... 続きを読む

CSSの実装はこれでかなり進化する！ Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ

2022/09/08 185 users Has セレクタ CSS 偶数 奇数

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追... 続きを読む

モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました

2022/09/06 21 users CSS Container 実装 Has コンテナクエリ

先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったこ... 続きを読む

ブラウザ, Node, Cloudflareでも動くDenoモジュール開発

2022/07/03 17 users CloudFlare TypeScript node 処理系

ブラウザだけでなく、非ブラウザなJavaScript（JS）処理系も増えてきたので、「主要ブラウザ、Node.js、Cloudflare Workersでも動くDenoファーストなTypeScript/JavaScriptモジュール開発＆CI/CD」をやってみました。一事例として共有します。 はじめに 最近、TypeScriptで hpke-js というモジュールをつくりました。 HP... 続きを読む

主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム

2022/03/22 14 users Edge Safari Firefox CSS サイボウズ

Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略... 続きを読む

CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説

2022/02/15 227 users CSS カスケードレイヤー@layer 最初 デベロッパー

CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知... 続きを読む

新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset | コリス

2021/07/19 28 users コリス CSS unset CSSリセット セレクタ

CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset... 続きを読む

2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法 | コリス

2021/05/25 34 users コリス Safa Flexbox デベロッパー Safari

2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、Safa... 続きを読む

WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など － Publickey

2020/11/15 121 users Publickey WebAssembly 実装 実現 勧告

WebAssemblyが目指していること。ナノプロセスモデルの実現、システムインターフェイス、実行時リンクの実装など Webブラウザ上でネイティブコードのように高速に実行できるバイナリフォーマット「WebAssembly」は、すでにChromeやFirefox、Edge、Safariなどの主要ブラウザでサポートされ、2019年12月にはW3Cの勧告にも... 続きを読む

Apple、次バージョンSafariでAdobe Flashサポートを終了か - iPhone Mania

2020/01/24 10 users Safari iPhone Mania Flash 当初 ほか

AppleはSafariブラウザの次のアップデートで、Adobe Flashのサポートを完全に終了する見通しです。したがってSafariの次のバージョンでは、Adobe Flashのインストールおよび利用ができなくなります。 iOS版Safariは当初よりFlashに非対応 ほかの主要ブラウザはすでにFlashのサポートを終了しているため、SafariのFlashサ... 続きを読む

WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど － Publickey

2019/11/18 141 users Publickey WebAssembly インテル 発足

WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど WebAssemblyは、Webブラウザ上でネイティブコードのように高速に実行できるバイナリフォーマットして策定された標準仕様で、すでにChromeやFirefox、Edge、Safariなどの主要ブラウザ... 続きを読む

W3C、パスワードを不要にする「Web Authentication」（WebAuthn）を勧告として発表。Chrome、Firefox、Androidなど主要ブラウザですでに実装済み － Publickey

2019/03/05 372 users Publickey WebAuthn FIDOアライアンス

W3C、パスワードを不要にする「Web Authentication」（WebAuthn）を勧告として発表。Chrome、Firefox、Androidなど主要ブラウザですでに実装済み W3Cは3月4日、FIDOアライアンスのFIDO2仕様の中心的な構成要素であるWeb認証技術の「Web Authentication」（WebAuthn）が勧告になったことを発表しました。 W3Cが策定する仕... 続きを読む

「TLS 1.3」正式リリース、Firefoxなど主要ブラウザが対応 - ITmedia NEWS

2018/08/14 68 users Firefox Mozilla 正式リリース ドラフト版

FirefoxやGoogle ChromeなどのWebブラウザは、既にTLS 1.3のドラフト版に対応しており、Mozillaは10月にリリースされる「Firefox 63」で、今回公開された正式版に対応予定。 米Mozilla Foundationは8月13日、インターネット通信暗号化規格の最新バージョンとなる「TLS 1.3」が正式リリースされたことを受け、Webブラウザ... 続きを読む

「TLS 1.3」正式リリース、Firefoxなど主要ブラウザが対応 - ITmedia エンタープライズ

2018/08/14 68 users Firefox Mozilla 正式リリース ドラフト版

FirefoxやGoogle ChromeなどのWebブラウザは、既にTLS 1.3のドラフト版に対応しており、Mozillaは10月にリリースされる「Firefox 63」で、今回公開された正式版に対応予定。 米Mozilla Foundationは8月13日、インターネット通信暗号化規格の最新バージョンとなる「TLS 1.3」が正式リリースされたことを受け、Webブラウザ... 続きを読む

Service Worker スクリプトのインストールと更新処理

2018/02/15 132 users スクリプト Service Worker 実装 web 仕様

Service Worker スクリプトのインストールと更新処理 Feb 15, 2018 | #web #serviceworker Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理につ... 続きを読む