HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
CSSfmtをつくった話、もしくは本質的な問題解決とは - Qiita
CSSfmtという、CSSとSCSSのコードを自動整形するツールをつくった。 使い方はREADMEを見たらわかると思う。Atom, Sublime Text, Vim, Emacs用のプラグインがあるので、エディタで使うのがおすすめ。コマンドラインからも使える。 atom-cssfmt sublime-cssfmt vim-cssfmt cssfmt.el AtomでCSSfmtが動いている様子： なぜつくったのか チーム開発において、コードのフォーマットが統一されていないことがある。 フォーマットの小さな違いはわざわざ指摘するのもめんどうだし、指摘されても嫌な気分になる。なので、コードをあるルールに従って自動で整形するツールの導入は必須だと思う。 CSSコードの整形ツールはいくつかある。CSS BeautifyやCSScomb、stylelintでも可能だ。 これらのツールとCSSfmt
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
使われていないCSSを探す方法
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
StyleDocco
StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resiz
インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
JavaSriptとCSSの結合/圧縮ツール14 | エンタープライズ | マイコミジャーナル
Robert’s talk Robert Nyman氏が自身のブログにおいてTools for concatenating and minifying CSS and JavaScript files in different development environmentsのタイトルのもと、JavaScriptとCSSを結合して単一のファイルにまとめたり、それぞれをミニファイするための14のツールを紹介している。WebサイトやWebアプリケーション開発に利用できるツールのまとめとして興味深い。紹介されているツールは次のとおり。 PHP Minify JavaScriptおよびCSSのミニファイ、結合、Gzip圧縮、キャッシュ対応 Combine JavaScriptおよびCSSの圧縮、複数URL結合機能 SmartOptimizer オンデマンドでミニファイ、圧縮、キャッシュ、結合、組み
GitHub - cjohansen/juicer: A command line tool for JavaScript and CSS developers
Juicer supports so-called cache busters. A cache buster is a pattern in a path whose only purpose is to “trick” browsers to redownload a file when it has changed in cases where a far future expires header is used. There are three types of cache busters. Soft cache busters (the default) add a parameter to the URL, like so: assets/images/1.png?jcb=1234567890, ie the letters “jcb” (as in Juicer Cache
Yahoo! UI Library: YUI Compressor
According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a
ブログテンプレート作成ツールで簡単ブログデザイン！ - CSSEZ
Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์
オンラインCSS自動整形 : akiyan.com
/* background-color */ body, div.navigation { background-color : #fff } div.contents { background-color : #e0e0e0 } /* color */ body, div.navigation { color : #000 } div.contents { color : #333 } /* font-size */ div.contents { font-size : 100% } div.navigation { font-size : 80% } /* margin */ div.navigation p { margin : 1em 10% } /* padding */ div.navigation p { padding : 1ex } /* background-color
サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」:phpspot開発日誌
CSSTYPE - web safe typography on screen for pixel perfectionists サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」。 次のようなＵＩが用意されていて、フォントやサイズを選択すればすぐさまプレビューされ、確認を簡単に行うことが出来ます。 このサイトを知っておくことで、サイト構築時のフォントの表示調整にかなり役立ちそう。 確認できるのは、font, font-size, text-decoration, word-spacing, line-height, letter-spacing, text-align, color, background, width, padding, text-indent, button-text。 次の図は、実際のプレビュー画面。 letter-spacing とか line-h
OverZone Software - CSS Tab Designer
Create killer menus effortlessly! CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required! With the CSS Tab Designer, you can : Quickly design your list visually Choose from a variety of styles/colors (60+ different designs/colors supported). [ Styles Authors / Credits ] Generate strict xhtml complian
秋元@サイボウズラボ・プログラマー・ブログ: CSSの圧縮サービス比較記事
週3日勤務。残り4日は英語ブログアジアジンやThe Japan Times等で活動しております。連絡先は「姓@gmail.com」です。 CSS Optimization: Make Your Sites Load Faster for Free というブログのエントリで、CSS の圧縮サービスの比較をしている。 空白や改行を除去したり、無くても同じ結果になる重複を省いたりすることで CSS のサイズをコンパクトにしてくれるサービスは、ウェブページの表示速度改善(や、帯域削減やサーバの利用効率向上)を目的としたものだ。 この記事では、4つのブラウザから使える無料サービスを使って、Digg や Slashdot といった著名なサイトの CSS を実際に圧縮し、圧縮率を比べている。 比較された4つのサービス、今回の測定対象では、Icey Compressor、Clean CSS、CSS Opt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - uncss/uncss: Remove unused styles from CSS
GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use
KSSで作るパターンライブラリ
GitHub - guard/guard-livereload: Guard::LiveReload automatically reload your browser when 'view' files are modified.
Create a new fiddle - JSFiddle
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS