タグ付けされた質問 「css」

ロックされています。この質問とその回答はロックされています。なぜなら、質問はトピックから外れていますが、歴史的に重要だからです。現在、新しい回答やインタラクションを受け入れていません。 巨大なCSSファイルとHTMLファイルがあります。HTMLファイルの表示中にどのルールが使用されていないかを知りたい。このためのツールはありますか？ CSSファイルは数年にわたって進化してきましたが、私が知っていることから、CSSファイルから何も削除されたことはありません。 編集：Dust-MeセレクターまたはChromeのWebページパフォーマンスツールを使用することをお勧めします。ただし、どちらもセレクターのレベルで機能し、個々のルールでは機能しません。セレクター内のルールが常にオーバーライドされるケースがたくさんあります。これは私が主に取り除きたいものです。例えば： body { color: white; padding: 10em; } h1 { color: black; } p { color: black; } ... ul { color: black; } HTMLのすべてのテキストはラッパー要素の中にあるため、決して白ではありません。bodyのパディングは常に機能するため、もちろんbodyセレクター全体を削除することはできません。そして、私もそのような役に立たないルールを取り除きたいです。 編集：そして、無駄なルールの別のケース：何も変更せずに既存のルールを複製する場合： a { margin-left: 5px; color: blue; } a:hover { margin-left: 5px; color: red; } 私は幸いにも2番目を取り除きmargin-leftます...再び、それらのツールはそのようなものを見つけられないように思えます。 編集：私はすべての答えに感謝しますが、悲しいことにあなたが提案したツールは有用な提案をしませんでした。私はあなたの答えを支持しましたが、上記で指定したように、よりきめ細かく処理するツールを待ちます。 ありがとうございました、

18 css  optimization 

最近では、<img>タグで達成されたことが<div>、CSS「スプライト」とオフセットを使用して設定されたCSS背景画像のようなもので行われることがよくあります。 私は事実上、alt属性（Googleによってインデックス付けされている）を失い、「タイトル」属性（私が理解している限り、インデックス付けされていない）に固執しているため、SEOにどのような影響があるのだろうと思っていました。 これは重大な欠点ですか？

18 seo  css 

pythonコードをWebサイト（CMS）で公開しています。任意のpythonスクリプトを読み取り、それから構文色のHTMLを作成するpythonスクリプトがあります。次に、このHTMLをCMS編集ウィンドウにコピーして貼り付けます。 問題は、私のPython構文強調表示スクリプトが<pre>タグを使用して、Pythonで非常に重要なタブ/スペースを保持することです。ただし、CMSはいくつかの不明な理由により、<pre>タグを削除します。管理者は、<div>代わりにを使用すべきだと言った<pre>。<div>wihte-spaceの書式設定を維持するためのスタイル設定を手伝ってもらえますか？

18 html  css 

Google Webmasterのガイドラインによると、「隠しテキスト」は受け入れられません。つまり、CSSでdisplay：noneを表示する場合、リンクまたは画像を含むタイトルまたは段落をある程度含むDOVがありますが、Googleクロールポリシーに違反しています（そのように見えます）。 私の質問は、Googleがどのように反応するかをメディアクエリ内で使用する場合ですか？というのは @media handheld, only screen and (max-width: 767px) { body { } .mobile-friendly{ display:none;} } 流動的なウェブサイトの開発では、サイトをモバイルフレンドリーにするために特定のコンテンツを非表示にする必要があります。ブラウザごとにcssを作成するのではなく、同じファイル内でcssをコーディングし、メディアクエリを使用してブラウザの動作を定義します。 グーグルはそれに対して何らかの措置を講じていますか？ -追加のPiont / Question Thanks @John Conde; あなたが正しいです。Googleはまだ非表示のテキストに対してあまりアクションを起こしていません。しかし、まだプロSEOはそれを使用しないことを提案します。ワードプレスのタグ内でロゴを使用し、それらを-9999pxにテキストインデントする例では、さらに多くのトリックが関係しています。 私は安全にプレイしようとしているので、これは非常に迷惑です。 Google隠しテキスト違反ガイド CSS表示プロパティについて明確に言及していることがわかります。これらのメディアクエリの例外については説明しませんでした！私は確実にしようとしているので、グーグルがそれについて何も言及していないので、私はまだこの質問について混乱しています。何かアドバイス？ 編集者による編集をありがとう。ご不便をおかけして申し訳ありません。 いくつかのコンテンツを非表示にする必要があるのはなぜですか？私が望んでいるブログはレスポンシブです。モバイルフレンドリーなデザインであることを訪問者に知らせたいです。ユーザーエクスペリエンスと使いやすさを向上させるために、モバイルアイコンをいくつか配置しました。ただし、モバイルではなくデスクトップブラウザでのみ表示されるようにします。既にモバイルからブラウジングしている場合、通知する必要がないためです。実際、私はむしろ、このサイトをモバイル上でWebアプリとして使用できることを伝えることができます。

16 css  web-development  google  seo  media 

新しいHTML5 / CSS3（Web8！）のものはかっこいいですね！今すぐ使用を開始するか、css / xhtmlを使い続ける必要がありますか？

16 html5  css3  css  xhtml 

ウェブサイトのページ読み込み時間を最適化していました。その方法の1つは、CSSの複数のHTTP要求を1つの結合HTTP要求に結合することでした。しかし、レビュアーの1人が興味深い質問をしました。複数のCSSファイルのダウンロードを並列化することで、ページの読み込み時間が短縮されないでしょうか？ インターネットで読んだ唯一のことは、（ブロックする）HTTPリクエストの数を減らすことがWebページを高速化するための鍵であるということです（ただし、Google Pagespeed Insightsはこれを明確に述べていないようです1）。 並列化によってパフォーマンスが改善されない、またはほとんど問題にならない（いくつかのHTTPリクエストを使用する利点に勝る）理由がいくつかあります。 新しい接続のセットアップには費用がかかります。複数の接続のセットアップは並行して行うことができますが、ブラウザーは最大で約4〜6の接続を使用するため（ブラウザーによって異なります）、CSSを並行してダウンロードするとJavaScriptや画像などの他のアセットのダウンロードがブロックされます。 HTTPS接続を設定するには、いくつかの追加データが必要です。これは簡単に数KBのデータになる可能性があります。これは、実際に送信したいCSSの代わりに、ネットワーク経由で送信する必要がある追加データです。 TCPスロースタートアルゴリズムにより、接続を介して送信されるデータが多いほど、接続は高速になります。そのため、実際に接続が長く接続されていると、新しい接続よりもはるかに速くデータが送信されます。たとえば、単一の接続を使用してページの読み込み時間を改善するSPDYプロトコルを参照してください。 TCPは抽象化です。まだ（通常）基礎となる接続は1つだけです。そのため、複数の要求が使用されている場合でも、回線を介して送信されるデータは、速度を向上させるために複数の接続から必ずしも恩恵を受けるとは限りません。 インターネット接続は、特にモバイルでは本質的に信頼できません。1つの要求が他の要求よりも大幅に速く終了する場合があります。CSSに複数のリクエストを使用するということは、最後のリクエストが完了するまでWebページのレンダリングがブロックされることを意味します。これは、平均的な接続よりもかなり遅れる場合があります。 それでは、CSSファイルのHTTPリクエストを並列化することに何か利点はありますか？ 注/更新：すべてのCSSファイルはレンダーブロックです。まだクリティカルパスの外に移動されていないCSSファイル。

15 css  performance 

しばらく前、Stack Overflowでこの質問に答えました。 /programming/5078239/how-to-remove-the-space-between-inline-block-elements 問題はdisplay: inline-block、HTMLの空白の影響を受けるため、要素に「余分なギャップ」があることです。http：//jsfiddle.net/thirtydot/4z4v2/を参照してください。 示されているように、ギャップはHTMLの空白を削除することで削除できます。ただし、その空白を削除することは望ましくない修正になる場合があります。たとえば、HTMLの操作が難しくなります。 そこで、この回避策を提案しました：http : //jsfiddle.net/thirtydot/4z4v2/1/ ul { font-size: 0; letter-spacing: -1px; } li { font-size: medium; letter-spacing: normal; } （letter-spacingSafariのギャップを完全に根絶するために必要です） それがそれでした ..このテクニックが別の回答で提案されたときにコメントがポップアップするまで： このコードには注意してください。リンクを含む要素内にテキストを明示的に非表示にしているため、Webクローラーによって悪用と解釈される可能性があります。リンク自体はより高い特異性ルールのおかげで見えるが、それでもウェブクローラーはコンテナ内に多数のリンクを見て、すべての祖先にテキストコンテンツを非表示にするよう指示するのは事実です。 このテクニックを使用したサイトは1つだけです（..通常、空白を削除するだけです）。このサイトは Googleで適切にランク付けされています（リンクなし、申し訳ありません）。問題がある場合、サイトには「フレーズ+場所」という形式で非常に具体的にターゲットを絞ったページがあります：架空の例として「ゾンビチョッパーレイブンホルム」。 私は本当に Googleを気にしていますが、他の検索エンジンに関する回答も歓迎します。 だから、私の質問は： font-size: 0テキストが実際に隠されていなくても、SEOのリスクが存在するだけですか？

14 seo  google  html  css 

FirefoxのメニューバーはChromeとは異なるフォントストレッチで表示されているようです。以下を参照してください。 この要素に適用されるCSSは次のとおりです。 font-variant: small-caps; font-size:13px; letter-spacing: 0px; font-family: Arial; font-stretch: normal; text-decoration: none; そのフォントに関するすべてがまったく同じであると言えますが、それでも表示が異なります（写真を参照）。どうして？

14 css  firefox  google-chrome 

ある背景画像で始まり、ホバー時に別の画像に変わるリンクがあります。両方の背景画像がCSSで設定されます。私のブラウザ（いずれか）は、実際にホバーするまでホバー画像をロードしないようです。しかし、その後、数秒間（私の非常に遅い接続で）新しいイメージをロードするのにかかる空白のイメージになります。ホバー時に遅延時間が発生しないように、ブラウザーがホバー画像をプリロードするように促す方法はありますか？

14 css  images  load-time 

ロックされています。この質問とその回答はロックされています。なぜなら、質問はトピックから外れていますが、歴史的に重要だからです。現在、新しい回答やインタラクションを受け入れていません。 私はjavascriptファイルを結合するためのスプロケットを知っていますが、試していません。他のオプションにはどのようなものがあり、どのように積み重ねられますか？

14 optimization  javascript  css 

現在、100,000ページのWebサイトに取り組んでおり、現在の設計は5年以上にわたって実施されており、継続的な更新により12,000+行のCSSファイルが4つ作成されています。 明らかにCSSは扱いにくくなり、スタイルの多くが複製され、実際に使用されているスタイルの数を知ることはほぼ不可能です。 縮小することはできますが、これは実際に問題に取り組むのではなく、避けられない再作業を遅らせるだけです。 だから、3つの質問には、任意のあるツールのためにそこには... 大きなCSSファイルの重複を解消しますか？ サイトをスキャンし、CSSクラスとIDの使用を記録しますか？ 多分グリースモンキーのようなスクリプトでこのようなスキャンを実現できますか？

13 css  looking-for-a-script 

私が今構築しているサイトで奇妙な出来事が発生しています。そこでは、イメージが想定されている方法とは90度異なって表示されますが、指定したイメージの通常の寸法は維持されます。これはiPadとiPhoneのSafariでのみ発生します。他のすべてのブラウザーにはこの問題はありません。 何か案は？ 問題のページはここで見ることができます：http : //www.andrewpeterson.com/i-had-to-be-a-perfect-gentleman-with-the-princesses/

13 css  images  iphone  ipad 

「ブックマンオールドスタイル」ウェブは安全ですか？そうでない場合、似たようなものがありますか？

13 css  web-development  fonts 

CSSを使用して多くの画像を（の背景として<div>）配置しますが、この方法では非常にゆっくりと読み込まれることがよくあります。それらはロードする最後のもののようです。このように表示するには、小さな小さなアイコン画像でも時間がかかります。ブラウザに画像の優先度を伝える方法はありますか？または、CSSファイル内の画像をより早くダウンロードして、より早くレンダリングするように取得しますか？

13 css  images  load-time 

Webサイト上のCSSは、デザイン全体の一部と見なされるため、Webサイトの著作権で保護されていることを知っています。また、CSSで使用される画像は著作権で保護されていることも知っています。 CSSを使用して画像を作成する場合はどうですか？ ライセンス料が25ドルのCSS3アイコンセットがあります。別の開発者は、これらの画像は著作権で保護されており、料金を支払わない限りアイコンを使用することは違法であると主張しています。コードのチャンクを著作権で保護することはできないと言います。CSSで矢印またはディスクアイコンを再作成する場合（コードをコピーするか、独自のコードを作成するか）、彼は頼りになりません。 CSS自体は著作権で保護されますか？

13 css  copyright  css3