CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
iOSでリンクを2回タップしないと画面遷移しない問題 | 経験知
※本ページはプロモーションが含まれています 作成:2015/08/17 iPhoneでこのブログのリンクをタップすると1回目では画面遷移せず、2回タップするとようやく画面遷移するという現象が起きています。 いろいろ試行錯誤して解決したわけではないですが、原因の推測と対策を紹介します。 現象 2回タップしないと画面遷移しないリンクはこのブログのソーシャルボタン部分。 下記画像のようになっているリンクでTwitterをタップすると、画像が薄くなるだけで画面遷移しない。 ↓ この後にもう一度Twitterをタップすると画面遷移が行われる。 Twitterのマークを1度タップし薄くなった状態で、1回のタップで画面遷移する正常なリンクをタップしても1度目では反応せず2回めのタップで画面遷移する。 このような状況。 原因の推測 上記現象が起こるリンクはCSSで「opacity」が設定されていた。 .s
iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」:phpspot開発日誌
implement a blur view of iOS7 style with css and jquery. oblurlay iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」。 iOSで、バックグラウンドをすりガラスですかして見たようなエフェクトがありますが、これをブラウザ上で実現するためのjQueryプラグインです。 背景に馴染む上になんかシャレオツ！ 関連エントリ iOS7用インタフェース作成用のワイヤーフレーム「iOS 7 Wireframe Kit」 フリーのiOS7アイコン800個セット iOS7のワイヤーフレーム作成用illustratorキット「Awosomekit」 iOS7のUIが詰まったPSD「iOS7 GUI PSD」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
