10

私たちはブックマークレットを開発しており、ブックマークレットがさまざまなWebサイト（cnn.com、bbc.co.uk、yahoo.comなど）に読み込まれると、さまざまなスタイルで表示され、これらのスタイルをリセットするのに苦労しています。

ブックマークレットのコンテンツは現在のページのDOMにあり、iframeにはありません（CookieとDOMへのアクセスが必要なため）。

CSSリセットを使用してみましたが、マージンなどの基本的なものだけがリセットされます。また、たとえば、カスタムフォーム、または継承する丸いテーブルの長方形があり、継承しないページがあります。

現在のページでこのDIV領域を完全に分離して、必要なだけに見えるようにする方法はありますか？

4

4 に答える 4

1

divを、ページに表示される可能性が低いいくつかのあいまいな要素に置き換えてみてはどうでしょうか。

例えば。bまたはem、iブラウザのサポートに夢中になっていない場合は、新しいhtml5要素の1つでもかまいません。

そして、ブロック要素であるaのdisplay: blockように機能するようにそれらをスタイリングします。div

結果のHTMLは有効でもきれいでもありませんが、ブックマークです。

それを除けば、本当に良いリセットが必要になります。

または、スタイリングを少し変えて生活する必要があります。

于 2012-07-23T09:37:44.390 に答える
1

最終的にhttps://github.com/premasagar/cleanslateを使用します

CleanSlateは極端なCSSリセットスタイルシートです。これは、HTML要素とそのすべての子のスタイルをリセットしてデフォルトのCSS値に戻すために使用されます。これは、他のすべてのタイプのルールをオーバーライドする！importantルールのみで構成されています。

于 2013-02-10T21:27:43.373 に答える
0

一意のIDを使用し、後で各プロパティに！importantを追加して（DOMで生成された要素をリセットするために）、または「HTML5」で新しいスコープ属性を使用することができます。

ただし、その要素または親のすべての明示的な「継承」値のスタイルで問題が発生する可能性があります。たとえば、相対的なフォントサイズも問題になります。

したがって、スタイルセクションの実験的なスコープ属性ですが、前回Chrome / Chromiumのみがサポートしていたので、Firefoxも最近サポートを開始した可能性があります-メーリングリストで大きな議論があったためです。

http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped

編集：

別の解決策は、デフォルトでDOMにないカスタム要素を使用することです。document.createElement（ "thisisfrommyapp"）;のようなもの 他の要素と同じようにスタイルを設定できますが、display：blockまたはそれらに必要な動作を適用する必要があります。

また、IEはそれらの使用を許可しますが、実際には、事前にTridentsのパーサーに挿入する必要があります。それらをHTMLで使用する場合は、DOMを解析する前にcreateElement（）を実行する必要があります（したがって、ほとんどの場合、ドキュメントの先頭にあります）。

<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>

Tridentに対してのみcreateElementを実行する必要があります。そうしないと、display：inline-blockのデフォルトモデルが原因で奇妙な解析動作が発生するためです:)

愚かな理由でWebサイトでXHTMLを使用している場合（パーサーがXMLタグを削除するため、HTML上でXHTMLを使用する正当な理由はありません）、カスタム名前空間を使用する必要があります。

〜乾杯

于 2012-07-23T09:29:31.990 に答える
0

この2つの手順に従って、コンテナをサンドボックス化します。

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>
  1. コンテナの名前空間のすべてのプロパティの設定を解除します。これall: unset;は単なるプレースホルダーです。
[class * = "namespace-"]、
[class * = "namespace-"]：after、
[class * = "namespace-"]：before、
[class * = "namespace-"]：hover：after、
[class * = "namespace-"]：hover：before {
    すべて：未設定;
    //設定を解除するプロパティ
}
  1. GruntまたはGulpタスクを使用して、属性セレクターを元のCSSに追加します。これによりカスケードが増加し、設定されていないハックによるオーバーライドが防止されます。
[class * = "namespace-"]。namespace-box、
[class * = "namespace-"]。namespace-title、
[class *="namespace-"]。namespace-text{
    //元のプロパティ
}

postcss-increase-specificityタスクを使用して仕様を自動化できます。

防弾コンテナをお楽しみください。

于 2016-02-03T09:54:41.623 に答える