最新のSafari 17.4、日本語の縦書き表示をサポート。Webkitのインラインレイアウトエンジンの全面的な書き換えが完了と報告
AppleのWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になった。本バージョンではWebKitのインラインレイアウトエンジンの全面的な書き換えを完了し、相互運用性やパフォーマンスが向上した。 Appleは、3月5日付けでリリースされたiOS 17.4、iPadOS 17.4、現在ベータ版のmacOS Sonoma 14.4などにバンドルされるWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になったことを明らかにしました。 AppleはこのSafari 17.4で、過去21年間使われてきたレンダリングエンジンであるWebkitのレガシーなラインレイアウトエンジンをついに廃止し、インラインレイアウトエンジンの全面的な書き換えを完了したことを報告しています。 これにより、最新のWeb標準での相互運用性が向上し、インラインレイアウトのバグが減り、パフォー
iOS/iPadOS 17.4でSafariが日本語縦書きをサポート。WebKitが最新のWeb標準に対応 | テクノエッジ TechnoEdge
ITジャーナリスト／Publickeyブロガー。IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。 Appleは、3月5日付でリリースされたiOS 17.4、iPadOS 17.4、現在ベータ版のmacOS Sonoma 14.4などにバンドルされるWebブラウザ「Safari 17.4」で、日本語の縦書き表示が可能になったことを明らかにしました。 AppleはこのSafari 17.4で、過去21年間使われてきたレンダリングエンジンであるWebkitのレガシーなラインレイアウトエンジンをついに廃止し、インラインレイアウトエンジンの全面的な書き換えを完了したことを報告しています。 これにより、最新のWeb標準での相互運用性が向上し、インラインレイアウトのバグが減り、パフォーマンスが向上し、安定性が改善され、新しい機能をはるかに簡単に実装で
ウェブブラウザの相互運用性を改善する「Interop」プロジェクトとはどんなものなのか？
ウェブサイトを閲覧する際に使用するブラウザには、Google Chrome以外にもFirefoxやSafariなどが存在しています。「どのブラウザで見てもサイトが同じように表示される」ようにするため、ウェブサイトの規格であるウェブ標準が策定されていますが、さらに互換性を向上させるために発足したのが「Interop」プロジェクトです。 The web just gets better with Interop 2024 | WebKit https://webkit.org/blog/14955/the-web-just-gets-better-with-interop/ ブラウザはウェブ標準に従うべきとされていますが、全てのブラウザが完全にウェブ標準に従うことができているわけではありません。ウェブ標準にどれくらい従っているかのチェックにはウェブプラットフォームテストなどの自動テストが使用さ
Safari 17のLink Tracking ProtectionはGAのUTMパラメータを削除しない
[レベル: 中級] Apple 製ブラウザの Safari がバージョン 17 で実装する Link Tracking Protection では、Google アナリティクスの UTM パラメータは削除対象に入らないようです。 Link Tracking Protection とは Link Tracking Protection（リンク トラッキング プロテクション）とは、リンクの URL に付けられているトラッキング用パラメータを削除する機能です。 iOS/macOS の次のアプリで機能します。 メッセージ メール Safari 17 のプライベートブラウジング これらのアプリ内リンクをユーザーがクリックしても、付加されたトラッキングパラメータが削除された URL でリンク先に移動するので計測できなくなります。 Link Tracking Protection の目的は、想像できるよ
Webページの画像やスタイルシートなどをまとめて1つのHTMLファイルとして保存してくれる機能拡張「SingleFile」のSafari版がリリース。
ブラウザで開いているWebページを画像やスタイルシート、フォントなどを含めて1つのHTMLファイルとして保存してくれる機能拡張「SingleFile」のSafari版がリリースされています。詳細は以下から。 SingleFileシリーズはフランスのGildas Lormeauさんがオープンソースで開発しているブラウザ機能拡張で、現在ブラウザで開いているWebページを画像やスタイルシート、フレーム、フォントなどをまとめて1つのHTMLファイルとして保存してくれる機能がありますが、この機能拡張のSafari版「SingleFile for Safari」がMac App Storeでリリースされています。 SingleFile is a Safari extension that helps you to save an entire webpage including images, sty
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
Safari 16で追加されたWebKit機能まとめ
Appleは2022年9月12日に、iOS 16・macOS Monterey・macOS Big Sur向けにSafari 16をリリースしました。このSafari 16のWebKit機能について、SafariとWebKitのWeb Developer ExperienceチームでAppleエヴァンジェリストを務めるジェン・シモンズ氏が解説しています。 WebKit Features in Safari 16.0 | WebKit https://webkit.org/blog/13152/webkit-features-in-safari-16-0/ シモンズ氏によると、今回リリースされたSafari 16には、ベータ版にはなかった多彩な機能が盛り込まれているとのこと。Safari 16 Betaの機能については、以下の記事を読むとよく分かります。 「Safari 16 Beta」のW
New WebKit Features in Safari 15.4
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
Safari 14.1 未満のバージョンに Flexbox の gap プロパティのフォールバックスタイルを追加するための CSS ハック
Safari 14.1 で Flexbox の gap プロパティが Safari でも使えるようになりました。 Safari 14.1 Adds Support for Flexbox Gaps ただ、Safari のバージョンアップは OS のアップデートが絡むので、他のブラウザに比べてすぐにサポートを切りにくいです。Flexbox gap はとても便利で Safari 以外の 主要なブラウザでは対応されている ので使いたいけど Safari のせいでまだ使えないと嘆いている方も多いのではないでしょうか？僕も同じくでした。 自分を含めそんな方々を救うために、それを解決する CSS ハックを作ってみましたので紹介します。（この CSS ハックにどれくらいのニーズがあるかわかりませんが 😅） 問題点 この問題の一番ややこしいところは CSS Grid 用の gap プロパティは Safa
New WebKit Features in Safari 15
With the release of Safari 15 for macOS Monterey, iPadOS 15, iOS 15, and watchOS, as well as macOS Big Sur and macOS Catalina, WebKit brings significant advancements in privacy and security, improved interoperability, and a host of new features for web developers. Take a look. Web Extensions This release brings Safari Web Extensions to iOS and iPadOS. Web Extensions use HTML, CSS, and JavaScript t
Safari･Chrome･Firefoxでありがちなバグの対処法について(主にCSS) | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、コーダーのばやしです。 皆様はInternet Explorer（以下IE）のことをどう思いますか？「昔ながらの使いやすいブラウザ」でしょうか？おそらく、コーディングをかじったことのある方で好きな人はあまりいないでしょう。 （IE BIG LOVEな方がいらっしゃいましたら申し訳ありません） なぜかと言えば、IE特有の仕様やバグといったものが多数存在するためです。 コーディング時に常に意識しなければならないのが、特定のブラウザ限定の特殊な仕様やバグです。 IEならではの仕様やバグに惑わされたことは枚挙に暇がないですが、IE以外の主要ブラウザで直面する仕様やバグも中々厄介なものです。 今回はそのような、Chrome/Safari/Firefoxなどの主要ブラウザで見られるようなバグや仕様を紹介していきます。よろしければブラウザを切り替えながら見比べてみてください。 ※以下の内容は
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（前編） - ICS MEDIA
どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
Appleが策定したスマホやPCの画面をもっと豊かな色合いで表現できる色空間「Display P3」とは？
色の見え方には個人差がありますが、その色をいくつかの数値で示し、定量的に表現できるのが色空間です。代表的な色空間はsRGBやAdobe RGBですが、そうした旧来の色空間よりも豊かな色合いを表現できる、Appleが策定した次世代の色空間「Display P3」について、ブラウザエンジン「WebKit」のエンジニアであるNikita Vasilyevさんが解説しています。 Wide Gamut Color in CSS with Display-P3 | WebKit https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ Display P3はsRGBの持つ色空間をすべてカバーした上で、sRGBよりも35％大きい色空間を持ちます。画像はDisplay P3で表現できる色の範囲にsRGBで表現できる色の範囲
Designing Websites for iPhone X
The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. The inset area is filled with the
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
[D] Mavericks Safariを以前のサクサク軽快Safariに戻す方法
出張初日から飛ばしすぎて連日鼻血は出るし、なんか既にスタミナが空な感じなんですが、ブログリハビリ中でようやく更新ペースが戻ってきたので勢いを落とさないように軽めのエントリー。（と思って書き始めたらむしろ長いエントリーになったｗ） 一枚目の写真は本文には全く関係なくて、注目していただきたいのは↑の写真。 問題 不覚にも昨日まで気づかなかったんですが、気づいたらMavericksのSafari 7ってタブ毎にプロセスを生成するGoogle Chromeスタイルにアーキテクチャが変わってたんですね。 もともと、Safariが採用しているWebKitというエンジンはシングルプロセスモデルで、それだと１つのタブがクラッシュしただけでアプリ巻き込んでしまうのが安定性として問題ってことで、Google Chromeは独自にWebKitを拡張して、タブごとにプロセスを生成するモデルにいち早く切り替えました
![[D] Mavericks Safariを以前のサクサク軽快Safariに戻す方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/25ae609e5c1aebf9446fe6d4ef8b9570308ffc5c/height=288;version=1;width=512/http%3A%2F%2Ffarm4.staticflickr.com%2F3755%2F11229634385_db3f569b98_c.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2021年から開発の現場で使える3つの便利CSS - aspect-ratio, gap, is()
