CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法

2024/04/11 10 users light-dark CSS 関数 Firefox バージョン

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介... 続きを読む

Browserslist でサポートブラウザを設定しよう - BASEプロダクトチームブログ

2021/12/05 6 users browserslist BASEプロダクトチームブログ

この記事は BASE Advent Calendar 2021 の 5 日目の記事です。 基盤チームの右京です。 最近ひょんなことから browserslist の設定を見返したのですが「babel や autoprefixer で必要になったので導入した」以上はあまり触れられていなかったため、この機会にいちから見直してみようと思いました。 browserslist? https:... 続きを読む

CSSの実践的なテクニックが参考になる！最近のCSSに追いつけていない人にお勧めの良書 -CSSレシピブック | コリス

2019/02/08 32 users コリス 良書 CSS テクニック 進化

Web制作の進化は本当にスピードが速く、中でもCSSの進化は非常に速く感じます。とは言え、CSSの場合はサポートブラウザのこともあり、最新のものだけを使用すればよいというものではありません。 CSSの最近の情報やテクニックを解説し、古いブラウザから新しいブラウザまで対応したさまざまな実装方法を詳しく解説した制... 続きを読む

これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle | コリス

2019/01/22 61 users Flexbox supports sticky コリス ネック

CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示され... 続きを読む

CSS GridのIE11をはじめ、サポートするブラウザに合わせた最小限のコードを自動生成できるツール -Grid Wiz | コリス

2018/11/16 14 users コリス Edge Safari Chrome CSS Grid

CSS Gridで実装する際に悩ましいのが、サポートブラウザです。 IE11をはじめ、Chrome, Safari, Edgeなどの古いバージョンにも対応したコード、最新のバージョンに対応したコードなど、サポートするブラウザに合わせて最小限のコードを自動生成できるツールを紹介します。 Grid Wiz Grid Wiz -GitHub Grid Wizの特徴 Grid... 続きを読む

CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利！効果的に使用するポイントのまとめ | コリス

2018/02/08 81 users コリス CSS Grid レイアウト レスポンシブ対応 能力

CSS Gridは今までに出来なかったレイアウトを実装するだけでなく、既存レイアウトをより簡単に実装する能力も備えています。サポートブラウザも十分になり、そろそろ既存レイアウトの実装方法を見直すタイミングかもしれません。 CSS Gridを使用して、3カラムや画像ギャラリーやカード型など、レスポンシブ対応のレイアウトを実装するテクニックを紹介します。 Common Responsive Layou... 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリス コンポーネント rem ナビゲーション Sass

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む

Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground | コリス

2016/02/09 188 users Fle Flexbox コリス Vista レイアウト

2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル ） Fle... 続きを読む

[CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ | コリス

2016/01/21 434 users コリス ビューポート CSS 天地 Vista

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、天地・左右・天地左右・ビューポートの天地左右の中央に配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実... 続きを読む

ブラウザで本が読める「Kindle Cloud Reader」が利用可能に - ITmedia eBook USER

2014/09/19 55 users USER ITmedia eBook Linux ブラウザ

サポートブラウザは、Google Chrome 20以上（Linux、Mac OS X、Windows）、Mozilla Firefox 10以上（Linux、Mac OS X、Windows）、Safari 5以上（Mac OS X）、Internet Explorer 10以上（Windows）、Safari（iOS 5以上を搭載のiPad）。 関連記事 Amazon、Kindle以外でも利用... 続きを読む

2013-04-21のJS: jQuery 2.0 、Sencha Touch 2.2、Grunt日本語リファレンス | JSer.info

2013/04/21 26 users JSer.info Sencha Touch API 互換性

JSer.info #119 - jQuery 2.0がリリースされました。 以前発表されたロードマップ通り、jQuery 2.x ではIE8以下のサポートは廃止されていて、jQuery 1.9とはAPIの互換性はそのまま維持されています。(サポートブラウザが減った以外) そのため、IE8以下を気にしない場合はjQuery Core 1.9 Upgrade Guide(日本語訳、変更点)がそのまま... 続きを読む

IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll | コリス

2012/06/10 723 users iPhone コリス クロスブラウザ クロスブラウザチェック

デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に... 続きを読む