web-dev-qa-db-ja.com

CSSの隠された機能

PHPおよびXHTMLに関する非表示の機能スタイルの質問で、いくつかの役立つヒントを確実に取り上げました。

そこで、CSSについて説明します。ピックアップは簡単ですが、すべて、そのデフォルトの動作、プロパティなどについて学ぶのに少し時間がかかります

ここにボールを始めるためのものがあります

@charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */

.element {
        /* takes precedence over other stylings */
        display: block !important;

        /* mozilla .... rounded corners with no images */
        -moz-border-radius: 10px; 

        /* webkit equivalent */
        -webkit-border-radius: 10px 
}

これらはそれほどではありませんhiddenですが、その使用はあまり普及していません。 CSSで発見したヒント、トリック、珍しい機能は何ですか？

csshidden-features
60
alex

ドキュメントのtitle要素を表示できます。

head, title {
    display: block;
}
58
Gumbo

このような要素に複数のスタイル/クラスを適用するclass="bold red GoldBg"

<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
39
Binoj Antony

私はCSSスプライトが本当に好きです。

すべてのサイトボタンとロゴに20の画像（したがって、それぞれに待ち時間がある20のHTTPリクエスト）を使用するのではなく、1つの画像を使用し、必要なビットだけが見えるように毎回配置します。

コンポーネントの画像とプレースメントのCSSを確認する必要があるため、例を投稿することは困難ですが、Googleによるその使用法についてはブログで紹介しています http://www.stevefenton.co.uk/Content/ブログ/日付/ 200905/Blog/Google-Uses-Image-Sprites /

38
Fenton

親要素をfloatingすると、要素が展開されてfloatedの子がすべて含まれるようになります。

25
Sophie Alpert

leftプロパティとrightプロパティの両方を指定することで、絶対位置の要素に可変幅を設定できます。これにより、単にwidthをパーセンテージに設定するよりも多くの制御が可能になります。

例えば：

#myElement {
    position: absolute;
    left: 5px;
    right: 10px;
}

別の例

#myElement{ /* fill up the whole space :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}
23
Steve Harrison

たぶん負のマージンと相対位置の要素の絶対位置の要素。

例については CSSでこれをどのように行いますか？ を参照してください。

23
Gumbo

Webkit CSS Transformationsをご覧ください。 -webkit-transform: rotate(9deg);

sample

21
Nikita Prokopov

私のものは：

  • azimuth、pitch...などの聴覚シートのすべてのプロパティ.
  • page-break-after: avoid;のような印刷モジュールのいくつかのプロパティ
  • counter-increment: section 1;
  • border-collapse: collapse;
  • background-color: transparent;
  • outline: 1px solid...
15
Marco Luglio

実際には機能ではありませんが、それでも有用です。子セレクターはIE6を除くすべてのブラウザーで機能するため、ハックや条件付きスタイルシートを使用したり、コードを無効にしたりせずにIE6を分離できます。したがって、次のコードのリンクはIE6では赤、他のすべてのブラウザーでは青になります。

[〜＃〜] css [〜＃〜]

/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}

[〜＃〜] html [〜＃〜]

<div id="content">
    <a class="link" href="#">Link</a>
</div>

これが セレクターのリスト （CSS2の場合）と ブラウザ互換性チャート です。

15
VirtuosiMedia

先週、聞いたこともない驚くほど便利なCSSプロパティを見つけました。

text-rendering: optimizeLegibility;

Safari、ChromeとFirefoxはすべてこのプロパティを理解し、設定すると高度なカーニングと合字を有効にします。これが素晴らしい デモ です。

15
kingjeffrey

IE6の透過PNGこれにより、IE6のPNG透過が修正されます。背景をnonに設定し、画像をフィルターに含めます。 javascriptやhtcは必要ありません。

.whatever {
   background: none; /* Hide the current background image so you can replace it with the filter*/
   width: 500px; /* Must specify width */
   height: 176px; /* Must specify height */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}

要素の後の改ページ動作を設定します-クロスブラウザ

table {
   page-break-after:always
}

プロパティは常に、回避、自動、左、右、固有を使用できます。 http://www.w3schools.com/CSS/pr_print_pageba.asp でドキュメントを読む

「セクション1」、「1.1」、「1.2」などでセクションとサブセクションに番号を付ける方法-クロスブラウザー

h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

http://www.w3schools.com/CSS/pr_gen_counter-increment.asp

テーブルの境界線を単一の境界線に縮小するか、標準のHTMLのように切り離します-クロスブラウザー

table
{
   border-collapse:collapse;
}

http://www.w3schools.com/css/pr_tab_border-collapse.asp

ボタンまたは入力フィールドから選択枠または点線を削除します。その他の優れた用途があります-クロスブラウザー

button{
   outline:0;
}

http://www.w3schools.com/CSS/pr_outline.asp

* IE6で100％の高さのhtml

* html .move{
   height:100%;
}

長い単語を改行して次の行に折り返すことを許可する-CSS3 Cross browser

.whatever {
   Word-wrap:break-Word;
}

http://www.w3schools.com/css3/css3_pr_Word-wrap.asp

略記

前

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

後

font: 1em/1.5em bold italic serif;

前

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

後

background: #fff url(image.gif) no-repeat top left;

前

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

後

list-style: disc outside url(something.gif);

前

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

後

margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /*  you can do this for top 2px, left/right 3px, bottom 5px and ;
14
Hussein

CSSのオーバーフロープロパティを使用して、フレームに頼ることなくスクロール領域を作成できます。例：

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow: autoは、コンテンツがdiv内に収まらない場合、必要に応じて水平および/または垂直のスクロールバーが表示されることを意味します。

overflow: scrollは、両方のスクロールバーが常に表示されることを意味します。常に1つのスクロールバーだけを表示する場合は、overflow-xまたはoverflow-yを使用します（これらは、最新のブラウザーとIE6でサポートされています）。

「だうう」と思っている方もいるかもしれませんが、枠なしでスクロール領域を作成できることに驚きました。

9
Joey Adams

：beforeおよび：after疑似要素

次のルールでは、文字列「Chapter：」が各H1要素の前に生成されます。

H1:before { 
  content: "Chapter: ";
  display: inline;
}

詳細は http://www.w3.org/TR/CSS2/generate.html

8
Hoque

インライン@media割り当て：

/* Styles.css */
.foo { ... bar ... }
...
@media print{
    .ads{display:none}
}

そのため、別のHTTP要求を取り除くことができます。

7
Halil Özgür

スタイルタグをブロック要素として表示し、HTML5contenteditable属性を使用してCSSを動的に編集できます。 デモはこちら

   <body>
       <style contenteditable>
           style {
            display: block;
           }
           body {
            background: #FEA;
           }

       </style>
   </body>

クレジット： CSS-Tricks

7
Salman for Hire

それほど隠された機能ではありませんが、すべての初心者の開発者が知っておくべきCSSのヒントを備えた質問

7
Paul Dixon

インラインブロック（フローティングdivの代替）：

.inline_block
{
    display:-moz-inline-box;
    display:inline-block;
}

このクラスをdivに適用しないでください！機能しません！スパン（またはインライン要素）に適用する

<span class="inline_block">
</span>
7
hasen

Cssの 'border'プロパティを使用して、さまざまな形の三角形を作成できるとは思っていません。こちらがリンクです。

（編集）次のリンクはもう機能しません。 http://www.dinnermint.org/blog/css/creating-triangles-in-css/

今から、以下を試すことができます http://jonrohan.me/guide/css/creating-triangles-in-css/

6
Hoque

本当に「隠されている」わけではありませんが、ボックスモデルと配置モデルを理解することは、非常に役立ちます。

同様に、position: absolute要素は、position: relativeでスタイル設定された最初の親に対して相対的に配置されています。

6
Sophie Alpert

現在はWebKit専用ですが、非常に興味深いものです CSSアニメーション

6
alex

ワードラッピングは、サーバー側のテクノロジーを使用せずにcssを使用して簡単に実行できます。

Word-wrap: break-Word;
5
sumanchalki

クロスブラウザーのインラインブロックは、結合された宣言を使用してブロック要素とインライン要素で機能します。

.column { 
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top; 
}

firefox 2などの標準ブラウザの場合：

.ie_lte7 .column { display:inline; }
3
Paul Sweatte

クロスブラウザ（IE6 +、FF、Safari）float代替：

.inline-block {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }
3
3zzy

別のIE6セレクター

* html .something
{
  color:red;
}

ランダムなIE6レンダリングのバグの修正- layout をトリガーするzoom：1を適用します。

3
Atanas Korchev

これが非表示の機能であるかどうかはわかりませんが、これを見て驚いただけです： http://www.romancortes.com/blog/css-3d-meninas/

2
zedoo
.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}

これらのブラウザカテゴリで<whatever>背景を異なるようにレンダリングします

1
TheBrain

Border-radiusはCSS3仕様の一部です。 CSS3はまだ完全には完成していないため、当面のプログレッシブブラウザーは、独自のプロパティ（-moz、-webkit）を使用してその一部を実装します。したがって、純粋なCSSできれいにコーディングされた、丸みを帯びた角をすでに楽しむことができます。

残念ながら、ブラウザ市場における他の大きなプレーヤーは、まだcss3機能を実装する兆しを見せていません。

0
Kees de Kooter