Sass v3.3, v4.0 での変更点についてメモ
Sass3.3 がそろそろリリースっぽいので、追加機能・変更点についてうまくまとまった記事があったので、学んでみた。 ちなみに、変更点はこちら 実際に動作を確認するにはpreバージョンのsassをインストールします。 [shell] gem install sass –pre sass –watch source_dir:output_dir [/shell] で確認できます。 ＆セレクタに関連する構文の改善たとえば、以下のようにした場合 [ruby] $module: ".module"; #{$module}–element { #{$module}__child { //valid color:orange; } & #{$module}__child { // valid color:orange; } #{$module}__parent & { // valid
KSS(Knyle Style Sheets)でstyleguideを作成
前回はStyleDoccoを試したので、もう一つのKSS(Knyle Style Sheets)も試してみた。 KSSについてKSSはTomDocをモデルに開発された stlyeguide generatorらしい。 A better future with KSS をみればどんなものか把握できそう。 CSSを文書化して、各UIの状態を視覚化することで保守性を高めらる。また生成されるドキュメントは階層構造を持っているのでスタイルの継承を把握しやすい感じですかな。 Styledoccoと同じくcssやScssなどのファイルにコメント追加するのですが、KSSの場合はフォーマットがあります。 // // スタイルに関する仕様や説明を記載。 // Starを付けるbutton // // Experimental: A/Bテストなどの実験的要素 // // Deprecated: 廃止予定の要素
StyleDoccoでstyleguideを作成
フロントエンドの開発で業務を引き継ぐと面倒なのがスタイルシートの仕様の把握です。 スタイルガイドがあるとメンテナンスやアップデートも非常に行いやすいのですが、スタイルガイドを作成するのは結構面倒。 そんなこんなでcssのコメントで対応してたが、そろそろキチンとしよう思い、styleguide document generatorを検討してみた。 styleguide document generatorについて有名どころの StyleDocco と kss があるので、今回はStyleDoccoについて。 StyleDocco generates style guide documents from your stylesheets by parsing your stylesheet comments through Markdown. You can write HTML snippe
Rails3.x開発時にIEで困らないためのメモ
Railsで開発するときにUIの実装時にIE8あたりで困ることないように備忘録としてまとめておく。 IE9まではファイルの読み込み限界値に気をつける。IEだけなぜかCSSが適用されないとき、IEの以下の仕様が原因。 IE9までは 1スタイルシートにルールは4095まで 1スタイルシートに @importは31個まで @importの入れ子は4階層まで ちなみにIE10からは、 1スタイルシートにルールは65534まで 1ドキュメントにスタイルシートは4095個まで @importの入れ子は4095階層まで に変更されてる。 詳しくしらべると、asset pipelineがdebug modeのままだとSprocketsがファイルを連結しないため、大量のファイルを読込むことでIEの仕様に引っかかってました。 回避策として、 /config/environments/development.r
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
