GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I UseYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita
ブラウザの進化が早い昨今、CSSのベンダープレフィックス(-webkit-や-ms-)が必要なプロパティと不要なプロパティが入り乱れています。必要なベンダープレフィックスのみを付与しようとした場合、途端にコード量が倍増し、メンテナンス性が低下し、バグの温床となります。このベンダープレフィックス地獄を解消するAutoprefixerをGulpやwebpackで使う方法を紹介します。 今なお続くベンダープレフィックス地獄 角丸を表現するborder-radiusプロパティはIE 11を含む全ての主要ブラウザで、ベンダープレフィックス無しで使えます。(Can I use border-radius) 一方で、ボックスレイアウトモジュールの為のflexboxプロパティやテキスト要素を変形するtransformプロパティ等では、Android 4.4以下等一部のブラウザではベンダープレフィックスが必
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
CSSを破綻させない / 学ぶ、考える、書き出す。
12/3（土）にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。 そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14 日目の記事として公開します。 CSS は破綻しやすい OOCSS の提唱者 Nicole Sulliban 氏も"CSS is too fragile"と 2008 年のイベントで言いました。 なぜ破綻しやすいのか。それは CSS の特性が絡んでいます。 CSS の特性 CSS の特性としておもに 3 つあります。 はじめに、記述を間違えてもエラーにならないことです。ブラウザで表示確認をおこなって初めて見た目がおかしいことに気づきます。 次に、スタイルが適用される条件としてルールセットを書く順序は関係ありますが、常に関係があるわけではない点です。 ちなみにルールセットは CSS のセレ
知っておきたいCSSの呪縛と希望 - Qiita
CSSを扱いし者たちに課せられた永遠の呪縛。 「CSS簡単でしょ」と思ってる人のコードが混じる恐ろしさ。。。 2016年、全てのCSSの戦友たちに言っておきたいことがある。 今回、それらを３つのポイントに分けてお届けします。 この記事は CSS Advent Calendar 2016 の10日目の記事です。 １．本当に怖いぞ - グローバルCSS 時は200X かつてCSSは様々なファイルに分かれておりました。 Common.css、Layout.css、Top.css、Info.css、Shop.css・・・ ページやモジュールごとにcssを分割し、必要に応じて読み込んでいた時代です。 この時代はCSSがいくらユルユルな仕様とはいえ、まだ平和でした。 つまり、読み込んだCSSファイル同士の関係さえ知っていればよいのでした。 201X 前期 (2010〜2013年ぐらい) CSSを1ファ
CSSとテキストで実装するローディングアニメーションのサンプルコード - NxWorld
CSSとテキストで実装したローディングアニメーションのサンプルです。 サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。 ここではアニメーションGIFでの見栄えと実装コードを紹介しているので、実際の表示は以下デモで確認してください。 また、デモではSCSSを利用したコードで実装しているので普段からSCSSで用いてる人はこちらでコードを確認してください。 CODE #1 先頭の「L」からひと文字ずつフェードアウトしていき、末尾の「G」までいったら次は先頭からひと文字ずつフェードインしてくるタイプのもので、フェードイン・アウトの見栄えはopacityを利用しています。 実
「自信がない」じぶんとのつき合い方 - デザイナーのイラストノート
夢見がちでまじめなうお座A型、社会人14年のうちフリーランスを10年もやりましたが、相変わらず人見知りですぐに自信をなくしてしまいます…。そんなわたしですが、最近ではこうやってブログやセミナーで自分の考えを発表する機会も増えてきました。「自信がない」じぶんとのつきあい方について書いてみたいと思います。 自信とは何か わたしにとって自信とは、「MP（マジックパワー）」のようなものです。その自信（MP）の根拠は、これまでの経験や他人から得た評価です。 じぶんを評価されるということ 人の評価というのは大きく2つあります、今回は「事実起因評価」と「感情起因評価」と呼ぶことにします。 学校や仕事で、評価を受けるときの物差しは、主に「事実起因評価」です。 しかし、人の能力というのはこれまで培ってきた感性というものと深く関わりがあります。例えばわたしはデザイナーですが、じぶんのデザイン能力や感性は「これ
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cheat Sheet
CSS Grid Layoutをガッツリ使った所感 - Qiita