Куточок CSS: про закруглених кутах CSS, Різне, Інтернет-технології, статті

Коли ми вперше вжили словосполучення “Куточок CSS” в назві статті в нашому блозі, Кріс Вілсон написав нам, що багато читачів можуть неправильно зрозуміти, що в даному повідомленні мова піде про радіус скруглення кутів. І, по правді сказати, найперший коментар до статті довів його правоту.

І сьогоднішня стаття з рубрики “Куточок CSS” цілком і повністю буде присвячена властивості border-radius, яке є найбільш часто запитуваної функцією в модулі CSS3 Backgrounds & Borders.

Причиною такої популярності є його особлива роль у стилізації веб-додатків. Створення сучасних, візуально привабливих вкладок, діалогів, кнопок навігації та супер-привабливих кнопок серйозно ускладнюється при використанні квадратних фігур. Скруглення країв кнопок в інтерфейсі веб-додатки робить його більш вишуканим у візуальному плані, що є досить важливим для авторів при використанні таблиць, макетів і зображень для досягнення бажаного ефекту у всіх браузерах. Маса індивідуальних вимог і експериментів стали причиною появи незліченних статей в блогах, спеціальних бібліотек Javascript і декількох Jquery-додатків.

Довгоочікувана функція
Після того, як в 2002 році були визначені перші специфікації, у 2004 році властивість border-radius вже підтримувалося в Firefox 1.0, хоча й у вигляді властивості moz-border-radius. Майже три роки по тому з’явився Safari 3.0 з властивістю-webkit-border-radius. У грудні 2009 року специфікації були запропоновані в якості кандидата на рекомендацію. Кілька тижнів Opera 10.50 стала першим браузером з підтримкою властивості без префікса вендора. Перша попередня версія IE9 Platform Preview, представлена ​​в рамках MIX 2010, також підтримує властивість border-radius. Протягом найближчих декількох місяців border-radius стане інтероперабельними властивістю, підтримуваним останніми версіями всіх браузерів.

Грамотна реалізація
Рішення найпоширеніших завдань користувачів завжди було нашим основним завданням. Але два кордони, пов’язані куточком CSS, можуть бути стилізовані, наприклад, використанням рисок або точок, які повинні слідувати зазначеної кривої. Кожна межа при цьому може використовувати інший стиль, ширину і навіть колір. Правильне поєднання всіх факторів, що забезпечує автору очікуваний результат з відповідно зі специфікацією, є основною складністю для браузерів.

Розглянемо точкові кордону різної ширини із закругленими кутами. Які, на ваш погляд, з наступних ілюстрацій відображає очікуваний результат більшості веб-дизайнерів?



Кожна синя рамка на представленому вище скріншоті є прикладом візуалізації одного тестового випадку в різних браузерах. Результат IE9 розташовується в правому нижньому кутку, а зображення є посиланням на тестовий випадок.

Для кордонів змінної ширини з тим же радіусом кута результат IE9 вказаний справа:



Однак, крос-браузерні угоду про візуалізації більш складних геометричних кордонів ще належить реалізувати:



Найбільш близьким до поточної реалізації в IE9 є самий правий варіант.

Майбутні завдання включають забезпечення інтероперабельних кутових градієнтів. Коли кути з’єднують межі рамок різних кольорів, сучасні браузери зазвичай відображають щось на кшталт:

Хоча специфікація визначає точне положення лінії переходу між різними колірними областями, інтероперабельність і вразливе до тестів визначення для колірного градієнта ще належить визначити. Якщо ви є веб-дизайнером і у вас є думки з цього приводу, направляйте свої відгуки на адресу робочої групи CSS – www-style@w3.org.

Властивість border-radius у попередній версії IE9
Попередня версія, представлена ​​в рамках MIX 2010, повністю підтримує властивість, згідно з його визначенням, включаючи довгий і укорочений синтаксис, а також відповідні властивості DOM.

Так як модуль CSS3 Backgrounds & Borders досяг стадії рекомендованого кандидата на реліз, в імені властивості префікс-ms вже не відображається.

Керівництво до дії
Незважаючи на те, що маса веб-сторінок вже використовують цю функцію, деякі сторінки, серед яких приклади запаморочливих кнопкок, можуть неправильно відображатися в IE9 або Опера 10.50, оскільки у властивості border-radius не використовуються префікси. У міру наближення специфікацій до фази рекомендацій і в міру роботи розробників браузерів над їх остаточної реалізацією в своїх продуктах ми рекомендуємо відмовитися від використання префікса у властивості border-radius.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*