はてブログ

はてなブックマーク新着エントリーの過去ログサイトです。



タグ 主要ブラウザ

新着順 人気順 5 users 10 users 50 users 100 users 500 users 1000 users
 
(1 - 25 / 47件)

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

2024/03/14 このエントリーをはてなブックマークに追加 17 users Instapaper Pocket Tweet Facebook Share Evernote Clip Has Firefox CSS 疑似クラス 特定

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

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

2023/11/22 このエントリーをはてなブックマークに追加 16 users Instapaper Pocket Tweet Facebook Share Evernote Clip CSSネスト 朗報 Relax 構文 記述方法

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

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

2023/10/12 このエントリーをはてなブックマークに追加 138 users Instapaper Pocket Tweet Facebook Share Evernote Clip subgrid Safari CSS Firefox 一行

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

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

2023/10/04 このエントリーをはてなブックマークに追加 19 users Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip CSS 三角関数 レイアウト ヘッダ テクニック

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

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

2023/04/03 このエントリーをはてなブックマークに追加 192 users Instapaper Pocket Tweet Facebook Share Evernote Clip 被害 localStorage 条件 クリックジャッキング

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

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

2023/03/19 このエントリーをはてなブックマークに追加 10 users Instapaper Pocket Tweet Facebook Share Evernote Clip アプリケーション Safari ChromeとSafari

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

CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある

2023/01/17 このエントリーをはてなブックマークに追加 7 users Instapaper Pocket Tweet Facebook Share Evernote Clip supports Has sup CSS Firefox

CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。 これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @sup... 続きを読む

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

2023/01/10 このエントリーをはてなブックマークに追加 164 users Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip Has セレクタ CSS 偶数 奇数

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

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

2022/09/06 このエントリーをはてなブックマークに追加 21 users Instapaper Pocket Tweet Facebook Share Evernote Clip CSS Container 実装 Has コンテナクエリ

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

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

2022/07/03 このエントリーをはてなブックマークに追加 17 users Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip Edge Safari Firefox CSS サイボウズ

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

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

2022/02/15 このエントリーをはてなブックマークに追加 227 users Instapaper Pocket Tweet Facebook Share Evernote Clip CSS カスケードレイヤー@layer 最初 デベロッパー

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

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

2021/07/19 このエントリーをはてなブックマークに追加 28 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス CSS unset CSSリセット セレクタ

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

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

2021/05/25 このエントリーをはてなブックマークに追加 34 users Instapaper Pocket Tweet Facebook Share Evernote Clip コリス Safa Flexbox デベロッパー Safari

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

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

2020/11/15 このエントリーをはてなブックマークに追加 121 users Instapaper Pocket Tweet Facebook Share Evernote Clip Publickey WebAssembly 実装 実現 勧告

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

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

2020/01/24 このエントリーをはてなブックマークに追加 10 users Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip 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 Instapaper Pocket Tweet Facebook Share Evernote Clip スクリプト Service Worker 実装 web 仕様

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

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

2018/02/15 このエントリーをはてなブックマークに追加 132 users Instapaper Pocket Tweet Facebook Share Evernote Clip スクリプト Service Worker 実装 web 仕様

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

mrubyをブラウザで実行するまで (WebAssembly) - Qiita

2017/11/18 このエントリーをはてなブックマークに追加 108 users Instapaper Pocket Tweet Facebook Share Evernote Clip Qiita rust mruby WebAssembly 言語

はじめに Rubyがブラウザで動作する 先日、主要ブラウザで WebAssembly を利用できる環境が整ったと話題になりました。 このことから、今後はWebアプリ(特にフロントエンド)でJavaScript系以外にも他の言語の採用が選択肢にはいるようになります。(検索すると、Rustがよく引き合いに出されています。) (参考リンク) WebAssembly対応、主要ブラウザChrome/Fire... 続きを読む

 
(1 - 25 / 47件)