avatar

CSS и Ubuntu - пока только вопрос.

Опубликовал в блог Дизайн, Эргономика и Интерфейсы

Приглашаю всех желающих рассказать мне всё, что знаете про совместное существование этих двух понятий.

Вопрос возник не на пустом месте, а в следствии просмотра видеоуроков по CSS на этом канале YouTube. В частности застрял я на уроке №17

Я смотрю эти гайды на работе во время обеденного перерыва(хочу из SEO уйти в верстку) и там для этих уроков завел себе браузер от Яндекса. Он удобный, не пересекается с другими браузерами, заваленными кучей плагинов. Операционная система у меня на работе Windows 7.
До этого момента всё было хорошо, предыдущие 16 уроков я прошел с честью, но стоило мне приняться за 17 про трансформации, как яндекс-браузер взбунтовался, не желая трансформировать iframe.
Я пришел домой и запустил свою любимую Ubuntu а на ней браузер Chrome. И снова неудача, хром напрочь отказался трансформировать iframe не смотря на префиксы -webkit-. Я очень был этим расстроен. Но когда, на следующий день я догадался запустить скрипты из гайда на Chrome, оказалось, что хром под виндой отлично всё схавал и показал всё ровно так как мне и было нужно. Таким образом я пришел к выводу, что проблема с моим браузером Хром конкретно на Убунту и значит есть какие-то хитрости, чтобы запускать CSS в совместимости с Линухом.

Уффффф — не люблю писать в торопях, но вынужден, надеюсь всё доходчиво втиснул в сей опус.

Так вот, жду ответов. Если нужны будут сами скрипты, которые я наваял держите, мне не жалко

HTML
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body>

CSS
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body>body{ background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png); font: 1em 'PT Sans',Tahoma, Arial; } #myframe{ width: 560px; height: 315px; } #wrapper{ width: 200px; height: 200px; -webkit-perspective: 500px; -moz-perspective: 500px; } #conteiner{ margin: 80px; width: 560px; height: 315px; border: 3px solid #FFF; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: rgba(0,0,0,.2); color: #FFF; text-align: center; font-size: 1.2em; line-height: 150px; -webkit-transform: rotateY(40deg); -moz-transform: rotateY(40deg); }

прошу прощения за отсутствие красоты в коде, он тут так размещается, я не знаю как его написать красивее.

Быть может укажете на ошибку или наставите на путь истинный, или подскажете к какому источнику знаний припасть страждущему путнику?

UPD: По совету уважаемого npofopr, выкладываю ссылочку на более удобочитаемую версию вышеизложеного кода: jsbin.com/asayut/2/edit

5 комментариев RSS
avatar
Это баг Хрома 11 версии, на которой основан Яндекс.Браузер. Попробуй Хром на Винде.
Альтернативное решение — доступ к содержимому iframe через jQuery:
$('iframe').contents().find('body').css('-webkit-transform', 'scale(0.5)');
Честно говоря, пока не стоит использовать подобные новшества, мало кто их увидит. Пользуй привычные CSS2 и общепринятые конструкции CSS3
avatar
Так я ж на практике и не использую пока. Но знать-то такие вещи нужно. Вот я и изучаю. А когда возникают ошибки, я не могу двигаться дальше, пока не разберусь что к чему. Ну А ещё я хочу собрать в этом посте как можно больше информации, чтобы написать гайд для совсем начинающих.Вроде таких как я сейчас.
avatar
в общем и изучать следует то, что есть во всех основных браузерах.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.