display:gridでIE11用のプレフィックスを付けたmixin

Edgeは大丈夫みたい。
IE11早く消えないかな。
下記で大まかな対応。gap系はどうにもならないのかな。

IE11を考慮して、endの値は省略できない。

//gridのベンダープレフィックス付与版mixin
@mixin grid(){
display: -ms-grid;
display: grid;
}

@mixin gtc($val){
-ms-grid-columns: $val;
grid-template-columns: $val;
}

@mixin gtr($val){
-ms-grid-rows: $val;
grid-template-rows: $val;
}

@mixin gc($start,$end){
-ms-grid-column: $start;
-ms-grid-column-span: $end – $start;
grid-column: #{$start}/#{$end};
}

@mixin gr($start,$end){
-ms-grid-row: $start;
-ms-grid-row-span: $end – $start;
grid-row: #{$start}/#{$end};
}

object-fitとobject-positionをIEやEdgeでも動かす。

object-fitとobject-positionはとても便利なのだけど、IEとEdgeは使えないのでIEとEdgeでは使えない。
いまだに「IE非対応なので・・・」で悩まされるとは。
いつまで経っても足を引っ張られる。

調べたら、コチラのプラグインで解決できた。
https://github.com/bfred-it/object-fit-images

説明にある通り、jQueryを使っている場合は、

$(function () {
objectFitImages('.sample');
});

あとは、cssにも追記が必要。

.sample{
object-fit: cover;
object-position: center top;
font-family: 'object-fit: cover; object-position: center top;'
}

こんな感じ。
font-familyに、使用したいパラメータをセットして使うみたい。

素敵だ。

無料のSSL

レンサバは変えるの面倒くさいので、何かよっぽどのことが無いと変えない。
今回はよっぽどのことがあった。

Let’s Encrypt (無料 SSL サーバ証明書)の登場と、それを通常サービスに取り入れているレンサバがあった。

SSLの導入は、コストがネックでいつも共用のサービスを使っていた。
でも、URLが変わってしまうので、色々と面倒なことも多い。

エックスサーバー
ならオプションではなく標準機能で実装されている。
(もちろんSSLつかわなくてもいい)

設定も簡単だし、ネックだった有効期限の短さ(90日)も自動更新という便利さ。

これはいいね。

エックスサーバーはこちら。

http://www.xserver.ne.jp/

jQuery mobileでリロードしないとJavascriptが動かない場合

$(function(){
 $("#sample").click(function(e){
  //処理したいこと
 });
});

で、ページを表示した後リロードしないと動かないことがあった。

対応
jQueryのバージョンにもよるが、.liveか.onで書き換えるとリロードせず動作した。
例)

$(function(){
 $("body").on("click","#sample",function(e){
  //処理したいこと
 });
});

こんな感じ。

直後に、clickなどマウスイベントが無い場合どうする?ということでハマる。

$(function(){
 alert('動かん');
});

googleさんにあちこち探してもらって下記で決着。

$("body").on('pageshow',"div[data-role='page']", function() {
 alert('動いた?');
});

compassのミックスインとCSS3 PIEでグラデーション

パスの問題によりhtcではなくjsを使用することが多くなった。

compassのミックスインでグラデーション


@import "compass";
.sample{
@include background(linear-gradient(#fff, #000));
}

なんだけど、これだけだとIEダメダメトリオ(7,8,9)ではグラデが表示されない。
※IE6は逝去

CSS3 PIEと併用する。
scss側はこんな感じ。


@import "compass";
.sample{
@include background(linear-gradient(#fff, #000));
-pie-background: linear-gradient(#fff, #000);
position: relative;
}

relativeはCSS3 PIEがうまく働かないときに。

netbeans + compassでmapファイルが出ない場合

プロジェクトのプロパティから
CSSプリプロセッサの
右上の方にある「実行可能ファイルを構成」ボタンをクリック
「追加削除の生成(G)(デバッグ)」
にチェックが入っていなければ、これが原因。

これで書き出されるmapファイルがあれば、Chromeは開発ツールでcssの代わりにscssファイルの場所を示してくれるのでとても便利。
安心してcompressedで書き出せる。

Firefoxは・・・試してみたが今のところ表示できない。
検索して出てきたアドオンとか入れてもダメだった。

netbeans + compassで書き出しをcompressedにする

プロジェクトのプロパティにある、CSSプリプロセッサで設定。
コンパイラオプションは

--compass

だけで最低限動作するけど、書き出されるcssのファイルサイズを抑えたいので

--compass --style compressed

に。
config.rbで設定できる

output_style = :compressed

と同じ結果になる。

floatの代わりにinline-blockを使う

横並びで表示させたいときに、高さが違っても大丈夫なので便利。

inline-blockを使う上で幾つか注意点

IE7用
cssで

#sample{
display:block;
*display:inline;
*zoom:1;
}

横並びにすると改行の分、余計なスペースが入る
親要素のletter-spacingで調整

例えば、ul liで使う場合。

ul{
letter-spacing: -.40em;
}
ul li{
display:block;
*display:inline;
*zoom:1;
letter-spacing: normal;
}

という感じ。

弱点

横並びにするときに、右側ピッタリにする必要がある場合は、面倒なのでfloatを使った方が楽かも。