3

いくつかの Web サイトに (iframe ではなくプレーンな HTML として) 挿入される HTML ウィジェットを開発しています。

問題は、一部のサイトでは、要素のスタイルがサイトの CSS (テキストの配置、下線、テキストの間隔など) の影響を受けることです。

サイトの CSS が挿入された要素のスタイルに影響を与えるのを防ぐ方法はありますか?

4

6 に答える 6

1

通常、いいえ、ありません。最終的に、HTML コードを他の人のサイトに挿入する場合、その HTML のスタイルを暗黙的に制御できるようにすることになります。

使用しても!important、別のスタイルでオーバーライドできます!important。最悪の場合、JavaScript を少し使用して要素にスタイルを直接設定することもできます。（そして、いずれにせよ、!important悪い習慣と見なされるので、おそらくやりたくないでしょう）

もちろん、Javascript を自分で使用してスタイルを設定することもできますが、それは、サイト所有者が同じことを行った後で同じことを行うことに対して依然として脆弱です。

本当に実行可能な唯一の解決策は、ウィジェット全体を iframe に入れることです。これは、Google が広告などに対して行っていることです。これにより、ウィジェットのコードがメイン サイトから分離され、サイトの所有者が誤ってスタイルを上書きする可能性を防ぐことができます。問題を強制する方法はまだあるかもしれませんが、組み込みのブラウザーのセキュリティ制限が作用するため、クロスサイト iframe を扱っている場合はさらに難しくなります。

しかし、本当の問題は、本当にこれを行う必要があるかということです。スタイルを定義したとおりに維持することは、どの程度重要ですか? サイトのデフォルト フォントを使用してウィジェットをレンダリングすると、特定のサイトでのウィジェットの見栄えがよくなるのではないでしょうか? おそらく、サイトの所有者は、特定のフォントや色に対する企業の要件を持っていますか? （一部の企業は、これについてうるさいほどうるさい場合があります）。確かにそれが彼らのサイトにあるのなら、彼らはそれを少なくともある程度制御する必要がありますか? 彼らがそれを終えたときにそれがゴミに見えるなら、それは彼らのせいです.

上記の段落がすべての人に当てはまるわけではないことはわかっています。ユーザーに著作権テキストなどを隠してほしくないので、これを尋ねているのかもしれません。しかし、場合によっては、そのために制限を課しているのかどうかを自問する必要があります。実際に努力する価値があるのか​​、それとも完全に合法的なことをしたいユーザーを悩ませるだけなのか.

于 2013-08-27T11:44:30.220 に答える
1

http://meyerweb.com/eric/tools/css/reset/をご覧ください。ウィジェットのスタイルシートの上部にコードを貼り付けます。これにより、ディスプレイに影響を与える可能性のあるほとんどすべての CSS プロパティがリセットされます。リンクにアクセスしたくない場合は、次のリンクを参照してください。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    background: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
于 2013-08-27T11:32:06.273 に答える
0

CSS の性質上、継承があります。つまり、プロパティを要素に送信しない場合、親から取得されます。私が理解している限り、ウィジェットをコードとして追加しています。コードが別のページ内に挿入され、iframe が含まれていないことを意味します。したがって、スタイリングは次のようなインライン スタイリングにする必要があります。

<div class="widget" style="padding: 0;">
...
</div>

最初に試すことができる解決策は、一番上のコンテナーにリセット スタイルを配置することです。したがって、そのすべての子はそこから欠落しているプロパティを継承します。ただし、プロパティがたくさんあり、それらをタグ内に直接追加すると奇妙に見えるため、これはあまり良くありません。

!important を使用するだけで十分ですが、それは変更されるスタイルがわかっている場合に限られます。

iframe を使用しないと、ウィジェットを完全にカスタム化するのは難しいと思います。次のようないくつかのクレイジーなことを試すことができます

  • カスタムタグを使用して個別にスタイルを設定する
  • CSS の代わりにより多くの画像を使用します。画像はそのままのように見えます
于 2013-08-27T11:46:15.377 に答える
-4

CSS はできるだけ具体的に記述してください。次の HTML があるとします。

<div id="myWidget">
    <div class="someContent">test</div>
</div>

someContent を赤にする必要があることを伝えたい場合は、次の css を使用します。

#myWidget div.someContent{#ff0000;}
于 2013-08-27T11:32:31.397 に答える