cssハックについて解説
- CSSハックとは、特定のブラウザや環境に対してスタイルを適用するためのテクニックです。
- 上記のCSSコードは、`@media tty`というメディアクエリを使用しています。このメディアクエリは、テレタイプや端末、表示能力に制限のある携帯デバイスなどを対象としたスタイルを指定するためのものです。
- また、`@import '/css/cmm/ie55win3.css';`の部分は、別のCSSファイルを読み込むための記述です。これによって、`ie55win3.css`というファイルが読み込まれます。
- ベストアンサー
以下のcss(css ハック？)を解説していただけませんか？
以下のcss(css ハック？)を解説していただけませんか？ 以下のようなcssの記述をみつけたのですが、意味がさっぱりです。 @media tty { i{content:"\";/*" "*/}}@m; @import '/css/cmm/ie55win3.css'; /*"; } }/* */ なお、 ●tty というmediaは、「固定幅の文字グリッドを用いたメディア、例えば、テレタイプ、端末、表示能力に制限のある携帯デバイスなどを示す。このメディアでは、画素単位 px は使えない。」ということ。 ●@media 規則 ⇒ 「@import と似たようなものに、 @media があります。これを用いると、一つのスタイルシートに、複数のメディアタイプに対する規則を記述することが出来ます。」 ということは分かっています。 ですが、それをわかっていても、上のcssの記述の意味がわかりません。 以上、よろしくお願いいたします。
- daisuke_dm
- お礼率81% (595/727)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
このハックはIE5.5のみに適用されるcssをインポートするためのハックです。 詳しくは知りませんが、content内の\のせいで次に来る"が無効になりcontentが終わらないブラウザ等があり、そのまま細かくブラウザを振り分けているように思います。 @m;の記述は@importの直前まで読みこめるブラウザ(多分IE5.0とIE5.5)があるのでIE5.0には適用されないようにしたのだと思います。
関連するQ&A
- cssハックについて
現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… （Firefox、Operaなど。IEは大丈夫です） なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }
- 締切済み
- CSS
- @import ハックについて
初心者になります。 @importハックですがどう作業していいかがわからないです。 <link rel="stylesheet" type="text/css" media="screen,tv" href="○○○.css"/> mediaをscreen以外にする。これでNN4を読みこませなくなることはわかりました。 1.ここの○○○.cssのファイル名はなんでもよろしいですか。 次にリンク先のCSSファイルの中に @import "○○○.css"; を記述する。これでIE4を読み込まなくする。 2.ここの@import○○○.cssのファイル名はlink要素で指定したファイル名と一緒にしないといけないのですか。 3.実際に適用するCSSはこのファイルに記述をしていいですか。 4.@importで指定したファイル名の中身は空白でいいのですか。 実際のやり方がわからないです。 ご存知のかた、いらしたら 教えていただけるとありがたいです。 よろしくお願い致します。
- 締切済み
- HTML
- CSSハックの使い方を教えてください
CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }
- ベストアンサー
- HTML
- このCSSハックはどういう意味合いのものでしょうか？
すみません、似たような質問を。 http://oshiete1.goo.ne.jp/qa4177163.html でして、締め切ってしまったのですが、よく見ると１００％は理解できませんです。 そして、その質問と同じ構造のCSSなのですが・・・。 以下は、どのようなCSS-hackなのでしょうか？ ==知っていること========================================= ●スターハック： セレクタの前に【* html】をつける。（半角スペースも忘れずに） IE4～6、MacIE4～5以下にのみ適用させる。Validator（※仕様に準拠しているかチェックしてくれるもの）に通る。 ⇒2行目はこれを用いている ●（名称不明） プロパティに続けて半角スペースと/**/を入れるとIE6には適用されない。 Validatorに通る。 ⇒５行目のこれは、このハックに該当するのでしょうか？ それとも、プロパティ（1px）のあとに「;」と「改行」と「}」と「もういっかい改行」があるので、該当しないのでしょうか？ 該当しないとしたら、なんのためにあるのでしょうか？ ========================================================= ★それから疑問が１つあります 1行目の「/*\*/」はどのような意味なのでしょうか？ これも、css ハックの一部なのでしゅうか？ 以上、よろしくお願いいたします。 ------------------------------------------------------------- （以下、説明しかすいようにと行番号をふっています） 1: /*\*/ 2: * html .container, * html .minwidth, * html .box { 3: height: 1px; 4: } 5: /**/
- ベストアンサー
- HTML
- IE10以降のCSSハックについて
はじめまして、いろいろ探し回ったのですが、行き詰ってしまいました。 みな様のお力をお借りしたく、こちらを利用させて頂きます。 IE9で表示位置がズレる項目があり、それを正そうと、IE9のCSSハックを記述してIE9では正しい位置に表示されるようになったのですが、今度はIE10以上でもそのハックを読み込んで逆にIE10以上で表示位置がズレるようになってしまいました。 ここまではネットでも書かれてるようにIEの仕様？ということでまだ分かるのですが、 今度はIE10以上の表示位置を正すためにIE10以上に読み込ませるCSSハックを下記のように記述しました。ですが、IE10、11共に読み込んでくれませんでした。 -------------------------------------------------- /* IE9 */ .sample:not(:target) { top: -0.3em\9; } /* IE10,11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .sample:not(:target) { top: 0.5em; } } -------------------------------------------------- 私自身、CSSハックとメディアタイプの関係を理解できておらず、上記の記述で何をしようとしているのか全くわかっていません。ネットに落ちていたのを真似て書いているだけの状態です。 そこでお願いなのですが、上記の記述が間違っているなら正しい記述の仕方をご教授ください。どうか、宜しくお願い致します。
- ベストアンサー
- CSS
- IE8でCSSハックが効かないです。
IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト 黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>
- 締切済み
- HTML
- Opera12のCSSハック
以下のページを参照してOpera12のＣＳＳハックを試しましたが、機能しません。 （機能しないとは、Operaでも何も反応しないという意味です。） http://goweb.jp/blog/2013/02/01/2641 理由が分かる方、いらっしゃいますでしょうか？ なお、バージョンは最新の12.15で試しています。
- ベストアンサー
- CSS
- cssハックを勉強中で、使い方について質問です。
現在cssハックを勉強中です。 あるサイトで調べるとoperaだけに使う場合 *+html:first-child p { /* for Opera */ line-height : 150%; } このように表示されてました。 IE4-IE6のアンダースコアハックの使い方は分かったのですが 上記のcssハックは今ひとつ使い方が分かりません。 例えば下記のcssがあったとして ul.piyo{ margin:0 0 10px 0; } ul.piyo li{ margin:0; } ul.piyo li.hoge a { width:100px; height:10px; display:block; padding:0; margin:0; background:url(../img/hoge.gif) ; } ul.piyo li.hoge a:hover { background-position:0 -18px; } ...以下、hoge2、hoge３と同じ<li>のcssが続く。 各hoge、hoge2、hoge3の下部分にoperaだけmargin10pxをつけたい場合 *+html:first-child li.hoge { /* for Opera */ margin:0 0 10px 0; } このように表記し、hoge2、hoge3と付け足せばいいのでしょうか？ 説明下手で申し訳ありません。 分かりづらいところは補足いたしますのでどうぞご回答よろしくお願いいたします。
- ベストアンサー
- CSS
- ブラウザ毎の対処 Win ie5-5.5
xml宣言なしのXHTML 1.0 Transitionalでコーディングをしています。 下記の記述で Win ie5-5.5のみ専用のCSSを読み込むようにしているのですが なぜか通常で適用するCSSが読み込まれてしまい Win ie5-5.5専用CSSが動作していないようなんですが 下記の記述に何か問題があるのでしょうか？ アドバイスいただけると助かります。 @charset "utf-8"; /*Mac ie5読み込み阻止対策\*/ @import "reset.css"; @import "default.css"; @media tty { i {content : “\”;/*” “*/}} @import ‘win-ie5-55.css’; /*”;} }/* */ /*Mac ie5読み込み阻止対策*/
- 締切済み
- CSS
- CSS Validatorでエラーの出ないclearfixハックとは
W3CのCSS ValidatorでCSSをチェックしていますが、 フロートをクリアするための記述に問題があり、 正当なCSSと判断されません。 Validatorでエラーの出ないclearfixハックをご存知の方、 アドバイスをお願い致します。 関係あるかわかりませんが、一応書いておくと htmlの記述は「XHTML 1.0 Strict」で行っております。 以下、エラーが出ているclearfixの記述です。 /*------Floatのclearfix*/ #header:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } #header{ display:inline-block; } /*clearfix Win版IE7・Mac版IE5対策*/ *html #header{ height:1%; } #header{ display:block; } Validatorが問題としている箇所は、下記の部分です。 *html #header{ height:1%; } 現在、悩みすぎて泥沼状態です。 どうも他の対策を思いつく余裕がなくなってきました。 申し訳ありませんが、皆様のお力をお借りしたく、 投稿させて頂きました。 なお、clear:both;の場合、完全にクリアされないことが あり、あまり使いたくない状況です。 何か良い対策方法があれば、アドバイスをお願い致します。
- ベストアンサー
- HTML
