Jump to content
  • 0

Синтаксис градиентов


Aleksandr.L
 Share

Question

Собственно сабж: 

 

На htmlbook'e, в теме про градиенты написано:

Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left.

linear-gradient-top.png

 

В книге Макфарланда "Большая книга CSS3" про ключевое слово "to" ничего не сказано, все примеры приводятся без него, самый простой пример:

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

Еще заметил, что данный пример не работает без браузерных префиксов, а пример на htmlbook'e работает без префиксов. Почему так происходит? И почему в книге приведен один синтаксис, а на htmlbook'e другой.

 

Еще одно различие: в книге Макфарланда сказано:

 

Углы вписываются в диапазоне от 0 до 360, а за ними указывается ключевое слово deg. 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он начинается в нижнем левом углу и перемещается под углом 45 градусов в верхний правый угол.

 

В то время как на htmlbook'e написано:

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке.

 

Помогите разобраться.

Edited by Aleksandr.L
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

1) синтаксис с "to" только для безпрефиксной записи;

2) синтаксис без "to"  работает как для префиксной, так и для безпрефиксной записи (хотя вот тут я возможно фигню ляпнул);

3) синтаксис с "to" является более свежей редакцией.

 

 

http://gradient.karmanov.ws/ вот тут вот (дада, минутка самопиара) можно посмотреть какая запись с "to" соответствует записи без "to"

Edited by antonKar
  • Like 1
Link to comment
Share on other sites

  • 0

Синтаксис с «to» — последний утвержденный вариант спецификации, работает без префикса во всём новом (IE10+, Андроид-браузер 4.4+, iOS Safari 6.1+ и все норм. десктопные), с префиксом не работает нигде (по крайней мере, не должен), поддерживает «магические углы». Вариант без «to» — предыдущая черновая версия спецификации, работает только с префиксами (но с более ранних версий мобильных браузеров) и «магических углов» не поддерживает.

На сегодня есть смысл указывать только беспрефиксную версию с «to» и, по желанию, -webkit-версию без «to» (для не самых новых андроидов). Остальные префиксы давно не нужны.

  • Like 2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy