css - CSSの隠された機能

Question

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 
}

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

score 58 · Accepted Answer

58

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

head, title {
    display: block;
}

于 2010-01-26T08:05:31.540 に答える

score 39 · Accepted Answer

このような要素に複数のスタイル/クラスを適用します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>

score 38 · Accepted Answer

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

すべてのサイトボタンとロゴに20枚の画像を用意するのではなく（したがって、それぞれの周りにレイテンシがある20のhttpリクエスト）、1つの画像を使用し、必要なビットだけが表示されるように毎回配置します。

コンポーネント画像と配置CSSを確認する必要があるため、例を投稿するのは困難ですが、Googleによるこの使用法についてブログに書いています：http：//www.stevefenton.co.uk/Content/Blog/Date/ 200905/ブログ/Google-Uses-Image-Sprites/

score 25 · Accepted Answer

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

score 23 · Accepted Answer

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;
}

score 23 · Accepted Answer

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

CSSでこれをどのように行うかを参照してください。たとえば。

score 21 · Accepted Answer

21

Webkit CSS Transformations を見てみましょう。-webkit-transform: rotate(9deg);

サンプル

于 2009-10-24T12:55:52.393 に答える

score 15 · Accepted Answer

実際には機能ではありませんが、それでも便利です。子セレクターは 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 用) とブラウザー互換性チャートは次のとおりです。

score 15 · Accepted Answer

私のものは：

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

score 15 · Accepted Answer

先週、聞いたことのない驚くほど便利な CSS プロパティに出会いました。

text-rendering: optimizeLegibility;

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

score 14 · Accepted Answer

IE6 の透明な PNG これは IE6 の PNG の透明度を修正します。背景を非に設定し、フィルターに画像を含めます。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
}

プロパティ always、avoid、auto、left、right、inherent を使用できます。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 クロスブラウザ

.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 ;

score 9 · Accepted Answer

CSS のオーバーフロープロパティを使用すると、フレームに頼らずにスクロールエリアを作成できます。例：

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

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

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

「えっ？」と思われる方もいらっしゃるかもしれませんが、フレームなしでスクロールエリアが作れると知って驚きました。

score 8 · Accepted Answer

: beforeおよび:after疑似要素

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

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

詳細については、http://www.w3.org/TR/CSS2/generate.html

score 7 · Accepted Answer

隠された機能はそれほど多くありませんが、CSSのヒントを取り上げた質問で、初心者の開発者なら誰でも知っておく必要があります。

score 7 · Accepted Answer

インラインブロック (フローティング div の代替):

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

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

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

score 7 · Accepted Answer

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

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

       </style>
   </body>

クレジット: CSS-Tricks

score 7 · Accepted Answer

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

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

別の HTTP リクエストを取り除くことができるようにします。

score 6 · Accepted Answer

実際には「隠されている」わけではありませんが、ボックスモデルとポジショニングモデルを理解することは非常に役立ちます。

position: absolute同様に、要素がでスタイル設定された最初の親を基準にして配置されていることを知っていposition: relativeます。

score 6 · Accepted Answer

6

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

于 2009-03-09T23:50:52.270 に答える

score 6 · Accepted Answer

CSSの「border」プロパティを使用して、さまざまな形の三角形を作成できるとは思っていませんでした。ここにリンクがあります。

(編集) 次のリンクは機能しなくなりました。 http://www.dinnermint.org/blog/css/creating-triangles-in-css/

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

score 5 · Accepted Answer

ワードラッピングは、CSS を使用して簡単に行うことができます。サーバー側のテクノロジを使用する必要はありません。

word-wrap: break-word;

score 3 · Accepted Answer

別のIE6セレクター

* html .something
{
  color:red;
}

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

score 3 · Accepted Answer

クロスブラウザ (IE6+、FF、Safari)floatの代替:

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

score 3 · Accepted Answer

クロスブラウザの inline-block は、組み合わせた宣言を使用して、ブロック要素とインライン要素で機能します。

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

Firefox 2 を含む標準ブラウザの場合:

.ie_lte7 .column { display:inline; }

score 2 · Accepted Answer

これが隠された機能かどうかはわかりませんが、これを見て驚きました: http://www.romancortes.com/blog/css-3d-meninas/

score 1 · Accepted Answer

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

これらのブラウザカテゴリでは、<whatever>背景が異なります

score 0 · Accepted Answer

border-radiusのものは、CSS3仕様の一部です。CSS3はまだ完全には完成していないため、その間、より進歩的なブラウザーは、独自のプロパティ（-moz、-webkit）を使用してCSS3の一部を実装します。したがって、純粋なcssできれいにコード化された丸みを帯びたコーナーをすでに楽しむことができます。

残念ながら、ブラウザ市場の他の大手企業は、css3機能を実装する兆候をまだ示していません。

css - CSSの隠された機能

27 に答える 27

速記

Related

Reference