css4 А вот вам счастье от разработчиков CSS4

[karakym]

От сюда начинается счастье)

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

<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> |
          <hwb()> | <gray()> | <device-cmyk()> | <color-mod()> |
          <hex-color> | <named-color> | currentcolor |
          <deprecated-system-color>

Вы на это только посмотрите:
 

em { color: lime; }            /* color keyword   */
em { color: rgb(0 255 0); }    /* RGB range 0-255 */
em { color: rgb(0% 100% 0%); } /* RGB range 0%-100% */

Ваще взрыв!!! Теперь цвета можно задавать в процентах!

А вот кто ни будь мечтал о цветовых профилях в CSS?
 

@color-profile = @color-profile <custom-ident> { <declaration-list> }

Цвета можно будет совмещать с кучей разнообразных функций:
 

color-mod() = color( [ <color> | <hue> ] <color-adjuster>* )
<color-adjuster> =
    [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) |
    [red( | green( | blue( | alpha( | a(] '*' <percentage> ) |
    rgb( ['+' | '-'] [<number> | <percentage>]{3} ) |
    rgb( ['+' | '-'] <hash-token> ) |
    rgb( '*' <percentage> ) |

    [hue( | h(] ['+' | '-' | '*']? <angle> ) |
    [saturation( | s(] ['+' | '-' | '*']? <percentage> ) |
    [lightness( | l(] ['+' | '-' | '*']? <percentage> ) |
    [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) |
    [blackness( | b(] ['+' | '-' | '*']? <percentage> ) |

    tint( <percentage> ) |
    shade( <percentage> ) |

    blend( <color> <percentage> [rgb | hsl | hwb]? ) |
    blenda( <color> <percentage> [rgb | hsl | hwb]? ) |

    contrast( <percentage>? )

Контрасты, смешивания, осветления, затемнения и т.д.
Прям редактор такой, который сможет хорошенько потомить и растровых и векторных перфекционистов!))

Теперь большинство элементов смогут обращаться к другим элементам, вызвав их по id или классу или просто проверками.
Так например background получил кучу новых событий.
 

<style>
#src { color: white; background: lime; width: 300px; height: 40px; position: relative; }
#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
</style>
<p id='src'>I’m an ordinary element!</p>
<p id='dst'>I’m using the previous element as my background!</p>

А как вам новые градиенты?
 

Цитата

background: conic-gradient(#f06, gold);
background: conic-gradient(at 50% 50%, #f06, gold);
background: conic-gradient(from 0deg, #f06, gold);
background: conic-gradient(from 0deg at center, #f06, gold);
background: conic-gradient(#f06 0%, gold 100%);
background: conic-gradient(#f06 0deg, gold 1turn);
/*————————————————-*/
background: conic-gradient(white -50%, black 150%);
background: conic-gradient(white -180deg, black 540deg);
background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%));
/*————————————————-*/
background: radial-gradient(gray, transparent),
            conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%;
width: 200px; height: 200px;

А увидев новые селекторы четвертого уровня, я вообще чуть не наложил в штаны! Теперь можно будет такие проверки мутить, что jQuery будет курить в стороне и ждать пока понадобится.

Скрытый текст

https://docs.google.com/document/d/1uZ0PeRj1U5ykIIMyKznOxs5hqtJF9_STs3BOmH8A7jo/edit?usp=sharing

[Get to heaven]

воу

[Vlad]

К родителю по прежнему нельзя обращаться, ::after может быть только один. Будем ждать CSS5.

[Николя223]

1 час назад, Vlad сказал:

Будем ждать CSS5

а я сразу css6)

[SelenIT]

К родителю, в теории, можно обратиться через :has(). Но W3C настолько

7 часов назад, karakym сказал:

наложил в штаны

от страха за быстродействие, что выделил этот :has() в отдельный «статический профиль», доступный скриптовым API, но не рендереру. Правда, с оговоркой, что «если кто-то из браузеров реализует его без страшных издержек для скорости, то, так и быть, выделять его в этот профиль не будут». Вся надежда на Edge!

А вот :nth-child(An + B of что-то) уже почти год как работает в Safari, что радует:)

[karakym]

5 часов назад, Vlad сказал:

К родителю по прежнему нельзя обращаться, ::after может быть только один. Будем ждать CSS5.

Цитата

Родительский (дочерний) селектор:

Этот селектор почти как Швейцарский Армейский нож, которого очень ждали, и вот он здесь. Самая обсуждаемая новинка в «Селекторной» спецификации «4 Уровня» даст вам невиданную ранее мощь в работе с CSS. Благодаря этому селектору, можно очень легко оформлять элементы, не добавляя им классы или идентификаторы. Такая особенность может быть супер-полезной при оформлении, например, меню, в котором нет никаких классов в разметке для идентификации элементов.

Давайте посмотрим на это в действии, используя некоторые базовые примеры. Пусть, у нас есть меню, состоящие из списка простых ссылок. Мы хотели бы оформить его, но оно полностью генерируется на серверной стороне на php, и у нас нет доступа к коду. Проблема возникнет, когда мы захотим оформить элемент li активного пункта меню, при том, что класс .active будет не у элемента li, а у самой ссылки. Известная проблема, не так ли? В такой ситуации самый просто путь – это перенести класс, отвечающий за активный пункт, с ссылки на элемент li. Но нам это не подходит, т.к. доступа к серверному коду у нас нет.

В нормальной структуре описания правил CSS, те или иные свойства применяются к последнему элементу. В правиле ul li a.active — это будет ссылка с классом .active, которая находится в элементе li, который находится в элементе ul. В правиле p span – это будет элемент span, который находится внутри элемента p, и т.д. Благодаря родительскому селектору, такой порядок может быть нарушен:

 

ul li! a.active { color: red; }

Теперь, мы можем оформить элемент li, даже если активный класс будет у его ребенка. При добавлении родительского сектора к элементу, мы говорим, что хотим оформить именно его, а не последний элемент.
Другой пример: можно изменить фон страницы, просто добавив ссылку с определённым классом в любое место:

 

body! header a.styleSwitcher:hover { background: red; }

Этот код будет делать фон (иначе говоря - страницы) красным при наведении курсора на ссылку с классом .styleSwitcher, находящуюся в хедере. Для достижения подобного эффекта, не используя родительский селектор, без JS не обойтись. Очевидно, что нативная поддержка подобных правил в CSS – наилучшее решение.

А вот Алексей @alverspb с Habrahabr думает иначе.

[klierik]

14 минуты назад, karakym сказал:

А вот Алексей @alverspb с Habrahabr думает иначе.

Это не он так думает а автор статьи, которую он перевёл. Но в целом не плохо.

[SelenIT]

В январе 2013-го Алексей с Хабра (и Анджей Мазур со Смэшингмэгэзина, которого он перевел) думали совершенно правильно. Но всё меняется, а черновики CSS-спек делают это с особым циниз постоянством. В теперешней версии черновика понятие «субъект селектора» (тот самый восклицательный знак) ушло, но к родителю (а также к предшествующему соседу, например) можно обращаться через :has(). Но с оговорками (см. мой ответ выше) и пока лишь в теории...

P.S. И да: CSS-модуль 4 (5, 6...) уровня != CSS4 (CSS5, CSS6...)