Являются ли "верх" и "сверху" одинаковым направлением для линейных градиентов?

Ответ 1

Это не одно и то же направление; они являются противоположностями.

to top является аббревиатурой для "снизу вверх", тогда как top означает "начинать с вершины". ¹ Это верно не только для других сторон, но и для углов таких как top right и bottom left.

Оба синтаксиса синтаксиса ключевого слова были задокументированы в модуле 3-го уровня CSS-изображений, поэтому многие реализации использовали ранний синтаксис на ранней стадии. Последний публичный рабочий проект, который использовал устаревший синтаксис, здесь; вы можете увидеть заметку, подтверждающую явную двусмысленность вокруг нее, что в конечном итоге привело к использованию ключевого слова to в последующих версиях. Последняя версия здесь.

Некоторые браузеры поддерживают оба синтаксиса для указания направления линейного градиента в своих специфических для поставщика функциях -*-linear-gradient(), однако следует отметить что стандартизованная функция linear-gradient() принимает только новый синтаксис с ключевым словом to. (Если браузер принимает оба синтаксиса в непостоянной функции, то он либо устарел, либо нарушает спецификацию, и должен быть сообщен.)

Обратите внимание также, что по умолчанию используется top для устаревшего синтаксиса и to bottom для текущего синтаксиса. Это означает, что направление по умолчанию одно и то же, и оно не изменяется.

Также стоит упомянуть, что если вы используете - prefix-free, он уже учитывает это изменение, с незначительным оговоркой, что вам нужно включить оба синтаксиса в отдельные объявления:

Если вы включаете обе версии, каскад выполняет свою работу и игнорирует последнюю версию, если ее не поддерживает:

background: linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);

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

¹ _{Если было ключевое слово from, тогда top и from top были бы эквивалентны.}

Ответ 2

Они противоположности. to top использует первый аргумент цвета в нижней части элемента, а top использует первый аргумент цвета вверху.

Здесь fiddle. MDN имеет полную информацию и историю.