Скрытые возможности CSS

Question

Скрытые возможности 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 
}

Они не так много скрыты, но их использование не часто широко распространено. Какие советы, хитрости, редкие возможности вы открыли в CSS?

60

css hidden-features

Источник

user31671 09 мар '09 в 23:17

27 ответов

Другие вопросы по тегам css hidden-features

user53114 26 янв '10 в 08:05 2010-01-26 08:05 · Answer 1 · 2010-01-26 08:05

Вы можете отобразить документ title элемент:

head, title {
    display: block;
}

58

Источник

user53114 26 янв '10 в 08:05

user33015 05 июн '09 в 07:33 2009-06-05 07:33 · Answer 2 · 2009-06-05 07:33

Применить несколько стилей / классов к элементу, как это 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

Источник

user33015 05 июн '09 в 07:33

user75525 05 июн '09 в 07:47 2009-06-05 07:47 · Answer 3 · 2009-06-05 07:47

Мне очень нравятся CSS-спрайты.

Вместо того, чтобы иметь 20 изображений для всех кнопок и логотипов вашего сайта (и, следовательно, 20 HTTP-запросов с задержкой вокруг каждого), вы просто используете одно изображение и размещаете его каждый раз, чтобы был виден только нужный вам бит.

Трудно опубликовать пример, так как вам нужно увидеть изображение компонента и CSS размещения - но я написал в блоге об использовании Google здесь: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

user49485 09 мар '09 в 23:32 2009-03-09 23:32 · Answer 4 · 2009-03-09 23:32

Дело в том, что floatесли родительский элемент будет расширяться, чтобы содержать все его floatЭд детей.

25

Источник

user49485 09 мар '09 в 23:32

user53114 09 мар '09 в 23:32 2009-03-09 23:32 · Answer 5 · 2009-03-09 23:32

Возможно отрицательные поля и элементы с абсолютным позиционированием в элементах с относительным позиционированием.

Посмотрите, как бы вы сделали это с помощью CSS? Например.

23

Источник

user53114 09 мар '09 в 23:32

user48492 05 июн '09 в 08:15 2009-06-05 08:15 · Answer 6 · 2009-06-05 08:15

Вы можете установить переменную ширину для абсолютно позиционированного элемента, указав оба 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;
}

user142655 24 окт '09 в 12:55 2009-10-24 12:55 · Answer 7 · 2009-10-24 12:55

Взгляните на CSS Преобразования Webkit, например -webkit-transform: rotate(9deg);

образец

21

Источник

user142655 24 окт '09 в 12:55

user13281 10 мар '09 в 00:11 2009-03-10 00:11 · Answer 8 · 2009-03-10 00:11

Не совсем особенность, но тем не менее полезная: дочерний селектор работает во всех браузерах, кроме 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) и таблица совместимости браузера.

user315010 17 июл '10 в 23:27 2010-07-17 23:27 · Answer 9 · 2010-07-17 23:27

На прошлой неделе я обнаружил удивительно полезное свойство CSS, о котором я никогда не слышал:

text-rendering: optimizeLegibility;

Safari, Chrome и Firefox все понимают это свойство, и когда они установлены, включите расширенный кернинг и лигатуры. Вот отличная демонстрация.

15

Источник

user315010 17 июл '10 в 23:27

user14263 10 мар '09 в 00:06 2009-03-10 00:06 · Answer 10 · 2009-03-10 00:06

Мои из них:

все свойства слуховых листов, как azimuth, pitch...
некоторые свойства модуля печати, такие как page-break-after: avoid;
counter-increment: section 1;
border-collapse: collapse;
background-color: transparent;
outline: 1px solid...

15

Источник

user14263 10 мар '09 в 00:06

user560735 15 фев '11 в 02:04 2011-02-15 02:04 · Answer 11 · 2011-02-15 02:04

Прозрачный PNG в IE6 Это исправляет прозрачность PNG в IE6. Установите фон в 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

* HTML для 100% высоты в IE6

* html .move{
   height:100%;
}

Разрешить разбивать и переносить длинные слова на следующую строку - CSS3 Cross browser

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

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

Shorthands

До

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 ;

user149391 26 июн '10 в 03:16 2010-06-26 03:16 · Answer 12 · 2010-06-26 03:16

Вы можете создавать области прокрутки, не прибегая к кадрам, используя свойство переполнения CSS. Пример:

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

overflow: auto означает, что если содержимое не может поместиться в div, горизонтальные и / или вертикальные полосы прокрутки будут отображаться по мере необходимости.

overflow: scroll означает, что обе полосы прокрутки будут присутствовать всегда. Если вы хотите, чтобы всегда присутствовала только одна полоса прокрутки, используйте overflow-x или же overflow-y (которые поддерживаются современными браузерами и IE6).

Некоторые из вас могут думать "дууух", но я с удивлением узнал, что области прокрутки можно создавать без рамок.

user218565 30 янв '11 в 14:18 2011-01-30 14:18 · Answer 13 · 2011-01-30 14:18

Псевдоэлементы :before и :after

Следующее правило заставляет строку "Глава: " генерироваться перед каждым элементом H1:

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

Для получения дополнительной информации http://www.w3.org/TR/CSS2/generate.html

8

Источник

user218565 30 янв '11 в 14:18

user372654 01 ноя '10 в 18:17 2010-11-01 18:17 · Answer 14 · 2010-11-01 18:17

Встроенные назначения @media:

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

Так что вы можете избавиться от другого HTTP-запроса.

7

Источник

user372654 01 ноя '10 в 18:17

user6521 09 мар '09 в 23:28 2009-03-09 23:28 · Answer 15 · 2009-03-09 23:28

Не так много скрытых функций, но вопрос с советами CSS, о которых должен знать каждый начинающий разработчик

7

Источник

user6521 09 мар '09 в 23:28

user35364 09 мар '09 в 23:47 2009-03-09 23:47 · Answer 16 · 2009-03-09 23:47

Встроенные блоки (альтернатива плавающим элементам div):

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

Не применяйте этот класс к div! это не сработает! применить его к диапазону (или встроенному элементу)

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

7

Источник

user35364 09 мар '09 в 23:47

user362006 07 мар '11 в 22:11 2011-03-07 22:11 · Answer 17 · 2011-03-07 22:11

Мы можем отобразить тег стиля как элемент блока и динамически редактировать CSS с помощью атрибута contenteditable HTML5. Демо Здесь.

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

       </style>
   </body>

Кредиты: CSS-хитрости

7

Источник

user362006 07 мар '11 в 22:11

user218565 08 дек '10 в 07:00 2010-12-08 07:00 · Answer 18 · 2010-12-08 07:00

Я никогда не думал, что используя свойство css 'border', я могу сделать треугольник различной формы. Вот ссылка, чтобы пойти,

(редактировать) Следующая ссылка больше не работает. http://www.dinnermint.org/blog/css/creating-triangles-in-css/

Теперь вы можете попробовать следующее: http://jonrohan.me/guide/css/creating-triangles-in-css/

user31671 09 мар '09 в 23:50 2009-03-09 23:50 · Answer 19 · 2009-03-09 23:50

В настоящее время только для WebKit, но довольно интересно: CSS-анимация

6

Источник

user31671 09 мар '09 в 23:50

user49485 09 мар '09 в 23:35 2009-03-09 23:35 · Answer 20 · 2009-03-09 23:35

Не совсем "скрытый", но понимание модели бокса и модели позиционирования очень поможет.

Мол, зная, что position: absolute элемент позиционируется относительно своего первого родителя, который имеет стиль position: relative,

6

Источник

user49485 09 мар '09 в 23:35

user218451 14 апр '10 в 11:26 2010-04-14 11:26 · Answer 21 · 2010-04-14 11:26

Перенос слов можно легко выполнить с помощью css, без какой-либо помощи серверной технологии.

word-wrap: break-word;

5

Источник

user218451 14 апр '10 в 11:26

user172637 29 дек '09 в 07:01 2009-12-29 07:01 · Answer 22 · 2009-12-29 07:01

Кросс-браузер (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

Источник

user172637 29 дек '09 в 07:01

30 июн '09 в 16:40 2009-06-30 16:40 · Answer 23 · 2009-06-30 16:40

Кросс-браузерный inline-block работает с блочными и встроенными элементами, используя комбинированные объявления:

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

для стандартных браузеров, включая Firefox 2, и:

.ie_lte7 .column { display:inline; }

3

Источник

30 июн '09 в 16:40

user10141 11 мар '09 в 20:52 2009-03-11 20:52 · Answer 24 · 2009-03-11 20:52

Другой селектор IE6

* html .something
{
  color:red;
}

Исправление случайных ошибок рендеринга в IE6 - примените zoom:1, чтобы активировать макет.

3

Источник

user10141 11 мар '09 в 20:52

user42645 04 янв '10 в 20:12 2010-01-04 20:12 · Answer 25 · 2010-01-04 20:12

Я понятия не имею, является ли это скрытой функцией, но я просто удивилась, увидев это: http://www.romancortes.com/blog/css-3d-meninas/

2

Источник

user42645 04 янв '10 в 20:12

user130341 09 июл '09 в 12:43 2009-07-09 12:43 · Answer 26 · 2009-07-09 12:43

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

сделает ваш <любой> фон другим в этих категориях браузера

1

Источник

user130341 09 июл '09 в 12:43

user26496 09 мар '09 в 23:41 2009-03-09 23:41 · Answer 27 · 2009-03-09 23:41

Материал border-radius является частью спецификации CSS3. Поскольку CSS3 все еще не закончен, более прогрессивные браузеры тем временем реализуют его части со своими собственными свойствами (-moz, -webkit). Таким образом, мы уже можем наслаждаться закругленными углами, чисто закодированными в чистом CSS.

К сожалению, другой крупный игрок на рынке браузеров по-прежнему не проявляет никаких признаков реализации функций css3.