Устранение проблем со стилизацией с помощью Modernizr

Наш адаптивный сайт «And the winner isn’t» предоставляет нам отличную возможность воспользоваться Modernizr для решения возникшей проблемы. Страница с викториной (по адресу http://www.andthewinnerisnt.com/3Dquiz.html) прекрасно работает в браузерах, поддерживающих 3D-трансформации (таких как Safari и Chrome), однако в остальных браузерах на этой странице при наведении указателя мыши не наблюдается 3D-эффект. В настоящее время, независимо от того, способен ли браузер пользователя визуализировать 3D-трансформации, на нашей странице выводится следующее примечание: This page relies on 3D transforms. If the posters don’t flip on hover, try viewing in Safari or Chrome (Эффект на данной странице базируется на 3D-трансформациях. Если постеры фильмов не переворачиваются при наведении на них указателя мыши, используйте для просмотра браузер Safari или Chrome).

Однако благодаря дополнительным классам Modernizr мы теперь можем сделать так, что соответствующее примечание будет отображаться только в том случае, если браузер пользователя не поддерживает 3D-трансформации.

.note {display: none;

}

. no-csstransforms3d. note {display: block;

}

Проанализируем этот фрагмент: сначала мы указываем в CSS-коде, что примечание не должно отображаться по умолчанию:

.note {display: none;

}

Это означает, что в браузерах, поддерживающих 3D-трансформации CSS (например, в Google Chrome 16), пользователи не увидят примечание (рисунок 9.7).

Затем, во втором правиле, мы задействовали классы, добавленные с помощью Modernizr, для отображения примечания в браузерах, которые не поддерживают 3D-трансформации:

. no-csstransforms3d. note {display: block;

На рисунке 9.8 показана все та же страница, но в браузере Firefox 9.

Примечание не выводится, так как браузер поддерживает ЭР-трансформации

Здесь примечание выводится, так как браузер Firefox не позволяет увидеть ЭР-эффект

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