• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Code School

プログラミング初心者向け応援メディア

  • Home
  • Swift
  • Python3
  • Ruby
  • Ruby on Rails
  • CSS
  • Sketch
  • How to Study
  • Column
You are here: Home / Web制作 / CSS / [CSS] -webkit-ってなに?

 

 

[CSS] -webkit-ってなに?

2018年4月29日 By Code School編集部

CSSのコードの中に-webkit-という記載を見かけたことがある人もいると思います。

今回はそのwebkitについての説明を行なっていきます。

-webkit-とは?

webkitの記述は、ベンダープレフィックスと呼ばれCSS3で実装予定の機能をブラウザ各社が先行して実装した機能を各ブラウザで使えるようにしたものです。

CSS
1
2
3
4
5
6
7
.container {
    -o-display: flex;
    -ms-display: flex;
    -moz-display: flex;
    -webkit-display: flex;
    display: flex;
}

各ブラウザベンダーの対応は以下の通り。

  • -o-・・・・opera
  • -ms-・・・IE(Microsoft)
  • -moz-・・firefox(mozilla社)
  • -webkit-・Chrome, Safari

タイトルにもありましたが、webkitというのはベンダープレフィックスの中でもChromeやSafariに対応したものだったというわけです。

 

ベンダープレフィックスの書き方として、各プロパティの頭に-webkit-などを付けるというもの。

そして、ベンダープレフィックスなしも併せて記述します。最高に面倒臭いですね。

 

ただし、ブラウザは日々アップデートされているので、特にベンダープレフィックスの記述を必ずしなくてはいけないという流れではありません。

 

なんでもベンダープレフィックスを付ければいいというわけではない

すでに実装されていたりするわけなので、なんでもベンダープレフィックスを付ければいいというわけではありません。

ブラウザの最新対応状況はこちらのサイトで把握できますので、必要があれば確認してみるといいでしょう。

https://caniuse.com

 

しかし、それを差し引いてもかなり面倒な作業であることに変わりはないですね。

Autoprefixerという最新のベンダープレフィックスをキャッチアップし、必要なもののみを付与してくれるツールもあるので、こちらなどを導入した方が作業効率や保守効率は上がるでしょう。








 

関連記事



Filed Under: CSS

Primary Sidebar




Categories

  • iOSアプリ開発 (48)
    • Swift (30)
    • Xcode (13)
  • Python3 (28)
    • Django (9)
  • Ruby (17)
    • Ruby on Rails (6)
  • Scratch (1)
  • Unity (2)
  • Web制作 (42)
    • CSS (34)
    • HTML (4)
  • コラム (11)
  • プログラミングスクール (93)
    • 子供向けプログラミングスクール (58)
    • 社会人向けプログラミングスクール (41)
  • プログラミング学習方法 (8)
  • 開発ツール (30)
    • Atom (1)
    • Brackets (5)
    • Github (2)
    • Mac (1)
    • Pycharm (3)
    • Sketch (16)
[Python]Scrapyを動かした時にSyntaxError: invalid syntaxとエラーが出る場合の対処法

[Python]Scrapyを動かした時にSyntaxError: invalid syntaxとエラーが出る場合の対処法

[Django]TextField内に記載した改行を反映させたい

[Django]TextField内に記載した改行を反映させたい

[Django]変数内の文字列をトランケートする

[Django]変数内の文字列をトランケートする

[Django]変数内に格納したhtmlコードを反映させたい

[Django]変数内に格納したhtmlコードを反映させたい

[Django]画面上で変数の文字列の長さを返すフィルター

[Django]画面上で変数の文字列の長さを返すフィルター

[Django]モデルを追加した時にmigrateエラーが出ないための方法

[Django]モデルを追加した時にmigrateエラーが出ないための方法

[Django] def __str__(self)とは?

[Django] def __str__(self)とは?

[Python]DjangoでMySQLを使う方法、ハマったことまとめ

[Python]DjangoでMySQLを使う方法、ハマったことまとめ

[Python]DjangoのチュートリアルDjangoGirlsをやってみた感想

[Python]DjangoのチュートリアルDjangoGirlsをやってみた感想

Swiftの命名規則まとめ

Swiftの命名規則まとめ

PycharmでDjangoをインストールしようとするとAttributeErrorが出る時の対処法

PycharmでDjangoをインストールしようとするとAttributeErrorが出る時の対処法

Pythonの命名規則まとめ

Pythonの命名規則まとめ

[Python]Djangoで構築されたWebサービス18選

[Python]Djangoで構築されたWebサービス18選

iPhoneアプリを公開する手順まとめ!デベロッパー登録からアプリ公開までの流れ

iPhoneアプリを公開する手順まとめ!デベロッパー登録からアプリ公開までの流れ

[iOS]アプリ申請時、バンドルIDにアプリがない時に手動で登録する方法

[iOS]アプリ申請時、バンドルIDにアプリがない時に手動で登録する方法