CSSメディアクエリの削除

Question

スタイルシートによって定義したメディアクエリを削除する方法はありますか？
メディアクエリが使用されているスタイルシートファイルを読み込んだ後、そのメディアクエリだけを無効にしたいような場合です。
以下、例です。

1 Component.css

.sample｛
  padding:0;
  margin:0;
  display:table-cell;
  ...
｝
@media screen and (min-width:500px) ｛
  .sample｛
    display:none;
  ｝
｝

2 Sample.html

< link href='./Component.css' ...>
<style>
 /*ここで.sampleのメディアクエリだけ無効にしたい*/
</style>

よろしくお願いします。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[syogakusya]

ご指摘ありがとうございます。
修正させていただきました。
引き続きよろしくお願い致します。

Answer 1

うーん、おそらく「無効にする」ということは仕組み上できないと思われます。
無効にするのではなく、既に設定されているメディアクエリ内の指定を打ち消すように上書きするしかないのではないでしょうか？

Comments

[syogakusya]

やはりそうなのでしょうか。
このサンプルの場合はどういった指定をするのがよいと思いますか？
display:table-cellをもう一度書き直すよりは良い方法があるでしょうか。
また、メディアクエリ内での指定がdisplay:noneだけではなく、position:relativeも含まれているとしたら、positionに関してはどのような指定を行うべきでしょうか。
実際に問題となっているコードを載せることはできませんが、打ち消したいメディアクエリは30行ほどもあるため、改めて既定のスタイルを指定し直すのは少し手間がかかりそうです。

[aKusano]

要はComponent.cssの中で500px以上の時.sampleを非表示にしてしまっているものを、非表示にせずそのまま表示しておきたい、ということであれば、
より優先度の高いところで再度display:table-cell;を指定し直すしかないと思います。

positionの指定は、メディアクエリ外で指定されていたposition値があればその値で上書き、メディアクエリ外で指定がなければ初期値ということなのでposition:static;を指定することになると思われます。position以外の値でも、メディアクエリ外で特別何も指定されていなければ、その要素の初期値で上書く必要があると思います。

というか、Component.cssのメディアクエリが不要ならそこだけ削除してしまったらダメなんですかね？（それが出来ないからの質門なんでしょうが・・・／汗）

[syogakusya]

ご回答ありがとうございます。
分かりました。
御察しのとおり、Component.cssはメディアクエリ部を含めてサイト全体で利用していて、Sample.htmlでのみメディアクエリを無効化したい状況です。
ただ、Component.cssからメディアクエリ部を取り除いたcssファイルを別に用意しようかとも考えています。
今後の保守こそ大変になってしまうのですが。
Component.css自体をメディアクエリ部と既定スタイル部で分割することも考えましたが、都合上他のページはあまり変更したくないです。
もう少し回答を募ってみて、それでも方法が無いようであれば、仰るとおり上書き指定をしようと思います。

[syogakusya]

今回は上書き指定を行うことにします。
ありがとうございました。