Скрытые особенности 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?

Ответы

Ответ 1

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

head, title {
    display: block;
}

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

Тот факт, что float с родительским элементом приведет к его расширению, чтобы содержать все его дочерние элементы float ed.

Ответ 5

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

См. Как вы можете сделать это с помощью CSS? для примеров.

Ответ 6

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

Ответ 7

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

Ответ 8

Мои:

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

Ответ 9

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

Ответ 10

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

text-rendering: optimizeLegibility;

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

Ответ 11

Прозрачный 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 ;

Ответ 12

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

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

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

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

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

Ответ 13

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

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

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

Для более http://www.w3.org/TR/CSS2/generate.html

Ответ 14

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

Ответ 15

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

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

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

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

Ответ 16

Назначения Inline @media:

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

Чтобы вы могли избавиться от другого HTTP-запроса.

Ответ 17

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

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

       </style>
   </body>

Кредиты: CSS-Tricks

Ответ 18

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

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

Ответ 19

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

Ответ 20

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

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

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

Ответ 21

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

word-wrap: break-word;

Ответ 22

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

* html .something
{
  color:red;
}

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

Ответ 23

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

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

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

.ie_lte7 .column { display:inline; }

Ответ 24

Кросс-браузер (IE6 +, FF, Safari) float альтернатива:

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

Ответ 25

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

Ответ 26

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

отобразит ваш <whatever> фон, отличный от других категорий браузеров

Ответ 27

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

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