ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Domein gereserveerd
sassをコンパイル出来る単一jarファイルを作る方法 – FNB
https://ameblo.jp/ca-1pixel/entry-11334309931.html
