Safari 13.1 以降では San Francisco の Mono や Rounded な variant とかを CSS で指定できるようになっている - polamjaggy
WWDC20 の "The details of UI typography" という動画をなんとなく見ていたところ偶然気がついた。 developer.apple.com Transcript 的にはこの辺: Now the -apple prefixed version has a standard name: system-ui. And earlier this year, we're bringing a new set of CSS font family names, like ui-rounded, ui-serif and ui-monospace to Apple platforms. そもそも: San Francisco 以降 Apple のシステムフォント群はじわじわ増殖している San Francisco フォントが Apple 製品のシステムフォントになってか
WebKit、iOS 9とOS X 10.11でWebコンテンツにAppleの新しいシステムフォント「San Francisco」の適切なWeightを使用するCSSプロパティ設定を公開。
AppleのWebエンジニアMyles Maxfieldさんが投稿したこの記事は「Webコンテンツは時に根幹となるプラットフォームでレンダリングされた時に全体的に合うようにデザインされている場合がります。このプラットフォームのシステムフォントをiOS とOS Xで使用する1つの方法はCSSのfont-familyプロパティの値に”-apple-system”を使用する事です。この方法を使用することでiOS 9とOS X 10.11ではAppleの新しいシステムフォント”San Francisco”を使えるようになります。”-apple-system”は”font-weight” CSSプロパティに作用し、最新のiOS／OS Xで最適なWeightを選択してくれます」というもので、 Web content is sometimes designed to fit in with the ov
Overview of WebKit’s CSS JIT Compiler
When it comes to performance, JavaScript generally gets the headlines. But if you look carefully, web pages are not all JavaScript, the performance of all the other parts also has a dramatic impact on the user experience. Observing only JavaScript gives a single point of view over the complex mosaic that is web performance. Making CSS faster and more scalable is an area of research in the WebKit p
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
読みやすい日本語のSafariにしておく - ザリガニが見ていた...。
些細なことなのだが、前々から気になっていたことがある。この日記をSafariで見たとき、以下のように表示されることがある。 ホームベーカリー観察日記 - ザリガニが見ていた...。 気になるのは→の部分。句読点や小さな「っ」が行頭に表示されてしまっている。普段何気なく読んでいる本や雑誌では、決してこのような表示になることはないはず。紙媒体では、当たり前のルールとして、さり気なく、でも徹底されている禁則処理。なのに、日本語のWebページをSafariで見ると「あれれ？」な表示になってしまうことがよくある。 ちなみに、Firefoxでは禁則処理が正常に働いて、以下のような表示になった。 ホームベーカリー観察日記 - ザリガニが見ていた...。 しかし、Google Chromeでは、Safariと同様に句読点や小さな「っ」が行頭に表示されてしまっている。 WebKit系ブラウザの問題なのだろう
Safari 5 で :visited の挙動が変更に : Safari Realized
2010年06月13日12:03 Posted incolumn Safari 5 で :visited の挙動が変更に Safari5（及び Safari4.1） では :visited の挙動に大きな修正が入っています。 Safari 5.0 および Safari 4.1 のセキュリティコンテンツについて 対象となるバージョン：Mac OS X v10.4.11、Mac OS X Server v10.4.11、Mac OS X v10.5.8、Mac OS X Server v10.5.8、Mac OS X v10.6.2 以降、Mac OS X Server v10.6.2 以降、Windows 7、Vista、XP SP2 以降 影響：悪意を持って作成された Web サイトにアクセスすると、ユーザがアクセスしたサイトを特定できる可能性がある。 説明：WebKit による CSS
3D Transforms
WebKit on Mac OS X now has support for CSS 3D transforms, which allow you to position elements on the page in three-dimensional space using CSS. This is a natural extension of 2D transforms, which we described in an earlier blog post. 3D transforms have been supported on iPhone since 2.0, and now we’re please to announce that we have currently added support for Leopard and later. If you want to ju
webkitのgradient簡単入力ツール - Web Directions East - wde - builder by ZDNet Japan
連載！プロが語るストレージ戦略 第二回：DX時代のデータ活用とデータ運用 注目される階層型データ基盤のとは何か コスト・運用の壁を崩す！ DX時代のゼロトラストセキュリティ戦略へ 中堅・中小企業に向けた手が届くEDR 性能の大幅向上を実現！ 最新AMDプロセッサを採用した最先端H/W ユーザーの求める幅広いラインナップを実現 セキュリティの今を知る 特集企画 ZDNet Japan Security Trend Spring 繋がる世界のデータセキュリティの最前線 ネットワークもサービスとして使う いま企業ネットワークが受ける大きな制約 クラウドシフトで大きく変わる！ Azureの上でVMware環境を動かす 昨年発表された注目の「AVS」 本当に使えるのか検証をしてみた結果 クラウド時代に理想のセキュリティ パブリッククラウド利用が増える今 ガバナンスとセキュリティの向上にできる事 次の
Styling Scrollbars
WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. For those who want to skip the article and just go right to the source, here is an example. Here is a screenshot for those not running a recent enough WebKit: The scrollbar pseudo-element indicates that an object should use a custom scrollbar. When this pseudo element is present, WebKit wil
Safari 4が対応したCSSの新機能：グラディエント、反転、マスク - builder by ZDNet Japan
Safari 4（ベータ版）では、レンダリングエンジンのWebKitが採用したCSSの新機能「グラディエント」「反転」「マスク」を利用できるようになった。本連載で紹介したトランスフォーム（回転、拡大・縮小、スキュー、移動）の機能と合わせると、これまではグラフィックソフトが必須だった処理の多くをスタイルシートだけで実現できるようになる。 今回は、これらの機能がどのようなものなのかを簡単に紹介したい。 CSSでグラディエント、反転、マスク 次のサンプルは「グラディエント（Gradient）」「反転（Reflect）」「マスク（Mask）」のそれぞれの機能を利用して、Safari 4（ベータ版）で表示したものだ。左から順に、背景をグラデーションカラーで表示したもの、テキストと画像を反転させたもの、画像の輪郭をマスクでぼかしたものとなっている。
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
CSS Animation
WebKit now supports explicit animations in CSS. As a counterpart to transitions, animations provide a way to declare repeating animated effects, with keyframes, completely in CSS. With a recent nightly build, you can see the above animation in action. Let’s take a look at how to use CSS animations, starting with an example of a bouncing box. See this example live in a recent WebKit nightly build.
AdSubtract - Macの手書き説明書
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
Safariのバージョン3では、スタイルシートを利用して文字のアウトラインを表示できるようになった。スタイルシートで文字をアウトライン化すれば、画像を使わずに文字のデザインの幅を広げることができる。「Safari 3.1でWebフォントを利用する」で紹介したWebフォントが普及すれば、文字のデザインに画像を使う必要は少なくなっていくだろう。 アウトラインのデザインを指定する 文字のアウトラインのデザインは、以下のような-webkit-text-stroke〜というプロパティで指定する。現在のところ、指定できるのはアウトラインの色と太さだ。 アウトラインのデザインを指定するプロパティ プロパティ機能
CSS 3のbackground-sizeとbackground-break：FirefoxとSafariのCSS対応 - builder by ZDNet Japan
前回に続いて、CSS 3で追加された背景に関するプロパティを確認していきたい。 今回は、背景画像の大きさを指定するbackground-sizeと、インライン要素の背景画像の繰り返し方法を指定するbackground-breakを取り上げる。background-sizeにはSafari 3とOpera 9.5が、background-breakにはFirefoxが対応している。 なお、背景に関する規格については、CSS 3の草案CSS3 Backgrounds and Borders Moduleを参考にする。 背景画像の大きさを指定するbackground-size background-sizeは、背景画像の大きさを指定するプロパティだ。現在、Safari 3が対応しており、-webkit-background-sizeというプロパティ名で利用することができる。また、Opera 9.
box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
CSS 3の勧告候補「Basic User Interface Module」では、横幅や高さの算出方法を指定するbox-sizingというプロパティが定義されている。これまではFirefoxとOperaが対応しているだけだったが、Safari 3やInternet Explorer 8（ベータ版）でもサポートされ、主要な4種類のモダンブラウザが対応したプロパティとなっている。 今回はこのbox-sizingプロパティの機能と、各ブラウザでの表示を確認していきたい。 box-sizingプロパティ CSSではHTML/XHTMLでマークアップした部分の横幅をwidth、高さをheightプロパティで指定することができる。このときbox-sizingプロパティを利用すると、widthやheightで指定した横幅や高さに、パディングやボーダーの大きさを含むかどうかを指定することができる。 bo
ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応 - builder by ZDNet Japan
ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク ともにDXを推進する コンテナ化されたワークロードを管理 継続的な価値を生みだす「協創」への挑戦 クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu ヤフー担当者が語る！ 安心なサービスを作るための試行錯誤 効率とリスクのバランスをどうしているのか デジタル時代のITインフラ構築術 仮想化統合、クラウドを経て今「マルチ」へ ITインフラの最適化と継続的進化への道筋 アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 時代はサーバ仮想化からコンテ
CSS Reflections
WebKit now supports reflections in CSS. Continuing the trend of using adorable baby photos to make features appear more impressive, let me introduce Kate again. 🙂 A reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica. -webkit-box-reflect: <dir
CSS Masks
WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon. This is in fact a mask applied to the <video> element. W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Safari のフォーカス時のハイライトを CSS で無効化するには - Enjoi Blog