問題タブ [vendor-prefix]

特定の css 宣言との重複が少し面倒だと感じ始めました。

たとえば、回転変換を利用して、mozilla、chrome/safari で前後の回転などを行いたい場合、次のことを行う必要があります。

そしてもちろん、これらをそれぞれ個別に適用する必要があります。

これらすべての中で唯一異なるのは、ms、moz、および webkit だけです。これは少しばかげています。理想的には、上記の 20 行のコードを 8 行に削減することができます。しかし、各ブラウザーは互いに戦争状態にあるようであり、CSS コーダーは世界中で苦しむ必要があります。

これは、CSS とブラウザーの実装がこの種のことを前進させ続ける方法ですか? より良い短い方法はありますか？これを行うことは、より DRY なコーディング エクスペリエンスの作成に反しているようです。

jQueryを使用するプロジェクトの使用に取り組んでおり、jQueryを使用してcalc（）ベースの幅を動的に設定する必要があります。問題は、calcが機能するためには、CSSが次のようになっている必要があることです。

CSS

jQueryを使おうとする$(selector).css('width', 'calc(33% - 50px)')と、複数のベンダープレフィックスバージョンのcalcで幅を設定できません。ベンダープレフィックスを可能にするために、jQueryで同じCSSプロパティの複数の設定を処理する正しい方法は何ですか？

背景情報

コーディング経験のない人でもフォーム フィールドをドラッグしてフォームを作成し、印刷したり、HTML ドキュメントとして保存したりできるビジュアル フォーム デザイナーを開発しています。

どんな角度でも斜めにもできる直線の描き方を紹介しました。高さのない通常の div を使用し、下の境界線のみを使用してこれを実現しました。そしてCSS rotate transform、div に適用すると、任意の角度に傾けることができます。

問題

デザイナーでは、ユーザーが線の角度 (勾配) を変更すると、Javascript を介してスタイルを適用します。このようなもの：

ユーザーがフォームを HTML として保存したい場合、outerHTML を取得してユーザーに返します。ここで、Chrome を使用しているMozTransform場合、生成された HTML にプロパティは存在せず、Firefox を使用している場合は存在しwebkitTransformません。

私が試したアプローチ

私は多くの方法でこれを解決しようとしました:

• styleプロパティ経由で設定する代わりに、プロパティ経由で設定してみstyle.cssTextました。うまくいきませんでした。
• HTML 生成中に divを取得しouterHTMLてプロパティを挿入することはできますが、非常に面倒です。
• 一般的に使用される角度 (0、45、90、135、180 など) の CSS クラスを提供することで妥協できますが、ここですぐにあきらめたくありません。

だから、私は皆さんに尋ねています - この問題を解決するためのより良い方法はありますか?

前もって感謝します、
シェッシュ

現在の W3C 標準から逸脱した CSS プロパティのブラウザー固有の実装のリストがあるリソースを見つけようとしています。

たとえば、IE が次のようなものをサポートしているとします。

しかし、提案が推奨候補になったとき、標準化された同等のものは次のとおりでした。

CR の前にリリースされた IE のバージョンをサポートするために、次のように記述します。

この種の変更のリストをグーグルで検索しても、あまり実りがありません。ベンダーの接頭辞については多くの嘆きと歯ぎしりがありますが、多くの「落とし穴」リストはありません。私がこれまでに発見した中で最も良いのは、変更点 (その場合は) についての無造作な言及-webkit-border-radiusですが、それらが実際に期待される入力を文書化することはめったにありません。彼らは単に壊れた例を与える傾向があります。

存在するプレフィックスの OKリストを(標準ステータスと共に) 見つけましたが、残念ながら、関心のある変更を特定するために必要な種類の詳細は示されていません。

それで、そのようなリストは存在しますか？

部分的なリスト、または非常に古いブラウザーを除外したリストを取り上げます (たとえば、IE6 はあまり気にしません)。_{また、大きな 3.1 ブラウザー (IE、Firefox、Webkit/Chrome/Safari、およびOpera} )についてのみ本当に心配しています。

私は、W3C によって対処されていないこと (外観など) にも関心があります。これは、ベンダーが直接作り上げたものを気にしなくても、十分に難しい問題です。

私は jsFiddle を作成しました: http://jsfiddle.net/Grezzo/JR2Lu/

キーボードの i キーを押すと、画像が反転してテキストが表示されますが、反転アニメーション中に、Chrome で表示するとちらつきます (特にテキストがちらつきます)。

(ブラウザ固有の CSS プロパティを前に付ける必要がないように、-prefix-free JS ライブラリを使用していることに注意してください。)

ちらつくのはなぜですか? どうすれば停止できますか?

更新: ちらつきは、XP で実行されている Chrome 20.0.1132.47 m で顕著であり、OS X 10.7.4 Lion の最新バージョンが何であれ (確認するために、現在 Mac の近くにいません)

データベースからのMACアドレスのリストがあります。各MACアドレスについてベンダーを検索し、最終的にベンダーごとにネットワーク上のデバイスの数を確認したいと思います。

http://standards.ieee.org/develop/regauth/oui/oui.txtで入手可能なファイルからベンダープレフィックスを解析するという汚い方法でそれを行うことができると思います。

しかし、もっと良い方法があるかどうか疑問に思っていますか？

たとえば、box-shadow や transition では、「moz」や「webkit」などのプレフィックスを使用する必要がありますか? 奇妙に思えますが、少なくとも Unix 上の Firefox では、接頭辞なしで完全に動作します。

私はPHP用のCSSミニファイアに取り組んできましたが、それは次の1つを除いて行われました。

ユーザーのブラウザーを検出して、ユーザーがborder-radius、-webkit-border-radius、-moz-border-radiusなどを必要としているかどうかを判断してもらいたいので、非常に長くて煩わしいグループを使用する必要はありません。 。

これにより、-webkit、-mozなどのすべてのインスタンスが検出されてborder-radiusがマージされるか、{vendor} border-radiusがCSSファイルに配置され、-webkit-、-moz-、または何もありません。最初のものは、他のプロジェクトに拡張できるようにしたいので理想的です。

私の人生では、使用するプレフィックスを正確に検出するPHP実装が機能していることを理解できません（そして、考えられるすべての場所でグーグル/検索しました）。

どんな助けでも大歓迎です！

WebKitで接頭辞が付けられ、サポートされているプロパティと、最終的に削除または導入されたバージョン以降のプロパティをコンパイルしようとしています。 それらに課せられる制限は何ですか？たとえば、あなたはそれらを見つけることができますか？-apple--khtml-
document.body.style

このバグのレポーターのような知識のある人だけが正確なリストを提供できると思います。しかし、私は最初にここでこの方法で誰もがそれから利益を得るだろうと尋ねることを好みます…</ p>

調査を開始するのに適した場所は、このリビジョンです。