読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

はてなブログテーマ hyperspace=クロスブラウザチェック

はてなブログ Web Tips

今回、クロスブラウザという点で決定的な問題となるのは、CSS では、

  • viewport
  • calc
  • flexbox
  • transition
  • transform

Javascript では、

  • LocalStrage, SessionStorage

あたりです。

Chrome, Opera, Edge(Windows)は問題なし

もともとテーマ作りには、Chrome を使ってチェックしていますので、Chrome は問題ないですし、現在の Opera って、レンダリングエンジンは Blink なんですね。ということで、Opera も OK です。

Edge も OK なんですが、ほとんど使っていないので、この期にちょっと調べてみましたら、WebKit 互換をうたっているんですね。吐き出すユーザーエージェントがこれです。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2486.0 Safari/537.36 Edge/13.10586

f:id:ausnichts:20160523105905p:plain

先日も Chrome のシェアが IE を逆転といったニュースが流れていましたが、IE のシュアが 90% なんて時代もありましたので、何だか隔世の感があります。

Firefox では、line-height に calc が効かない

トップページのブログ臭さを消そうとカテゴリーを画像のブロックで表示しているのですが、そのタイトルをブロックの上下中央に表示するため

line-height: ブロックの高さ

としています。で、その値を px などの絶対値で指定すれば問題ないのですが、カテゴリー画像(仮に4つ)をページ全体に表示するため、

line-height: calc( ( 100vh - タイトルブロックの高さ ) / 2 )

と指定しますと、Firefox では、line-height が効きません。

f:id:ausnichts:20160523113026p:plain

ググってみますと、どうやらバグのようですね。

Bug 594933 - support calc() on properties that accept values (line-height)

仕方ないですので、こっちですね。

display: table-cell;
vertical-align: middle;
height: calc((100vh - タイトルブロックの高さ) / 2);

Safari(Mac)のことがよく分からない

(この項の記載は間違っているかもしれません。)

Mac の Safari というのは、Windows の IE と同じで、OS に組み込まれていて、OS のバージョンにより Safari のバージョンも固定されているんですね。IE ほどサポート状況が騒がれないのはシェアの問題なんでしょうか?

それに、ググってみますと、OS のサポート終了時期なども公開していないと書いている記事もあります。これが本当なら、Apple って、Microsoft よりまずくないですか?

それはともかく、Mac なしでチェックできないかと、レンダリングエンジンを WebKit に変更できる Lunascape でチェックしてみました。

f:id:ausnichts:20160523132428p:plain

ところが、この WebKit のバージョンが古いです。ざっと目につくところでは、

  • calc にベンダープレフィックスが必要
  • vw, vh は対応しているが、calc 内に vh, vw が含まれると NG
  • before, after 擬似要素は親要素に position:relative が必要?
  • Flexbox の挙動が変?

ということで、かなり面倒…。Safari のエミュレータはないかと探してみても無料版ではいいものがありませんね。

エミュレートはできませんが、確認するだけなら「BrowserStack」は、スクリーンショットがとれますので結構役に立ちそうです。30分間だけの試用版がありますが、ブラウザが限定されますのであまり意味がありません。

ということで、Safari(Mac)のバージョン 6 は、nav-panel に HOME, PAGE TOP, SIDEBAR のリンクと推奨ブラウザを表示するだけにし、メインコンテンツ側のカテゴリーパネルは、vh を使った calc が効かないバージョンは非表示のままになっています。

f:id:ausnichts:20160524173302j:plain

IE9

IE9 は、flexbox に対応していませんので、カテゴリーパネルが縦に並んでしまいますし、nav-panel には何も表示されません。

f:id:ausnichts:20160524192802j:plain

カテゴリーパネルの flexbox をやめて float で対応することにしましょう。

nav-panel の方は、Safari(Mac)のバージョン 6 と同様に、nav-panel に HOME, PAGE TOP, SIDEBAR のリンクと推奨ブラウザを表示するだけにします。

で、Safari バージョン6 とほぼ同じ表示になります。

Androidブラウザ, Safari5 など

多分ほとんど使われていないと思いますが、旧式ブラウザは、基本、メインコンテンツが表示されればいいということで、padding に使っている vw を % に置き換えておきましょう。

f:id:ausnichts:20160524204642j:plain

ということで、クロスブラウザとなりましたでしょうか?