wakuworksのブックマーク - はてなブックマーク

CSS aspect-ratioプロパティの代わりをSassのmixinで作成する方法
aspect-ratioプロパティとは指定した要素のアスペクト比を設定できるCSSプロパティ。例えば aspect-ratio: 16 / 9; のCSSプロパティを要素に追加すれば16:9のアスペクト比を設定できる。 16:9 aspect-ratio: 16 / 9; レイアウトのアスペクト比の維持に便利なプロパティだがSafari 14.x以下では使用できない。 https://caniuse.com/mdn-css_properties_aspect-ratio Sassの@mixinでaspect-ratioを使用 aspect-ratioが対応ブラウザが少なく、そのままでは使用できないため、使用する際はpostcss-aspect-ratio-polyfillを使用する必要がある。しかし、postcss-aspect-ratio-polyfillを使用するためにはNode
wakuworks 2021/07/24
CSS

sass
リンク
iOS 8.0でSafariでスクロールするとresizeイベントが実行される
スクロールするだけでresizeが発生 iOS 8.0にアップデートしてSafariでサイトを見ていたらページをスクロールしただけでresizeイベントが発生する。調べてみたらスクロールしてアドレスバーが縮小化したときに発生するようだ。 $(window).resize(function() { alert($(this).width() + ' ' + $(this).height()); }); iOS 8.0でSafariでスクロールするとresizeイベントが実行されるサンプルほかにもこのような問題が iOS 8でSafariのアドレスバーをタップした時に背景が表示されないバグ
wakuworks 2014/10/10
js

iOS
リンク
Safariだとinputタグにline-heightをつけるとplaceholderの位置がずれる
Safariでinputタグにline-heightをつけるとplaceholderの位置がずれる。line-heightをつけないとIEの場合、現在最新のIE9でもplaceholderが使用できないため代用としてinputタグにvalue値を入れる場合があるのだが、このときheight:30pxなどが付いている場合、line-height:30pxがついていないと位置が上にずれてしまうので注意が必要。 ※Safari 5のバグなのでSafari 6以上であれば発生しないです。 Safariだとinputタグにline-heightをつけるとplaceholderの位置がずれるサンプル
wakuworks 2013/01/28
Safari

Android

css

css3
リンク
1