Як використовувати modernizr - zencoder

Інструмент, який покликаний зробити життя прогресивних веб-дизайнерів трохи легше, це Modernizr.

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

огляд Modernizr

Незважаючи на те, що можливості CSS3 використовуються веб-дизайнерами все більше і більше, підтримка цих можливостей браузерами значно відстає.

Останнім часом я використовую Modernizr практично постійно для того, щоб виділити ті браузери, які не підтримують специфічні властивості стандарту CSS3.

Як працює Modernizr

) На сторінці відключений, то скрипт Modernizr також не працюватиме (спільно з усіма іншими функціями сторінки, зав'язаними на цій мові), тому було б добре, якщо у нас буде можливість відкоту (fallback) для цього випадку.

для елемента html - це та "зачіпка", на яку можна повісити все CSS-fallback'і для цього випадку.

для елемента html на цілу групу інших класів. В результаті вихідний код сторінки може виглядати приблизно так:

Вражає, чи не так? Але що означають всі ці класи? Давайте розберемося.

В даному випадку, сторінка була відкрита в браузері Firefox 3.5. Цей браузер (на жаль) не підтримує множинні фони на CSS, CSS-градієнти і CSS-трансформації.

Скрипт Modernizr вміє автоматично визначати можливості браузера, в якому відкрито поточний веб-сторінка. Для кожного з CSS-властивостей в скрипті Modernizr є свої власні класи для їх позначення.

Наприклад, множинні фони на CSS "позначені" як

і так далі і стилізувати їх.

Однак, це не означає, що всі ці елементи можна використовувати також в браузері IE. Але ви можете стилізувати ці елементи і тоді IE "зрозуміє" їх і не зможе ігнорувати.

Прим. перекладача: загадкова фраза, яка особисто мені ні про що не говорить. Потребує подальшого вивчення.

висновок

Сподіваюся, мені вдалося пояснити, для чого потрібен Modernizr і наскільки він корисний в повсякденній роботі. Так як ми не можемо повністю покладатися на той факт, що браузери підтримують всі властивості, які ми хочемо використовувати, то бібліотека Modernizr є найкращим засобом для того, щоб об'єднати два світи - один, де все можливо, і інший, де все можливо лише частково .