IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2016/05/24 CSS, javascript, WebTips, はてなテーマ, はてなブログ

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

  • viewport
  • calc
  • flexbox
  • transition
  • transform

Javascript では、

  • LocalStrage, SessionStorage

あたりです。


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

  • Firefox では、line-height に calc が効かない
  • Safari(Mac)のことがよく分からない
  • IE9
  • Androidブラウザ, Safari5 など

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

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

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

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

line-height: ブロックの高さ

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

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

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

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

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 でチェックしてみました。

ところが、この 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 が効かないバージョンは非表示のままになっています。

IE9

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

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

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

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

Androidブラウザ, Safari5 など

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

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

はてなブログテーマ=対応ブラウザはどこまでにすべきか?
はてなブログテーマ hyperspace (完成)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com