Jump to content
  • 0

Достижение кроссбраузерности верстки


Stager36
 Share

Question

На одном ресурсе уже поднимал такую тему, спрошу и у Вас. Хочу поговорить о достижении кроссбраузерности верстки. Все что я пока что верстал - исключительно для себя, т.е. для приобретения практических навыков - на хостинг ничего не заливал, проверял только в новых браузерах. И вот сейчас уже начинаю задаваться вопросом - как достигать профессиональной верстки, с соблюдением всех требований.
Вот если говорить о кроссбраузерности, когда читал "Большую книгу CSS" Макфарланда и другие материалы, отмечал какие свойства не работают в определенных версиях IE, где обязательно указание префиксов поставщиков, в каких случаях нужно добавлять zoom: 1, что то в голове отложилось и я это старался исрользовать, но, ясное дело, что то и забылось. Так вот, хотелось бы понять, как работают профессиональные верстальщики. Понятное дело, что спецы с большим опытом знают все явные и неявные проблемы кроссбраузерности и сразу же пишут нужный код не прыгая между браузерами. А что в остальных случаях, неужели у верстальщика открыт с десяток разных браузеров и он по ходу написания кода проверяет результат во всех? Или сначала доводит до готовности верстку в своем "рабочем" браузере, а после этого начинает проверку в остальных?
Или может быть все ограничивается проверкой в специальных сервисах, который проверяют твой код и указывают, в каких версиях браузеров могу быть проблемы. Знаю два таких сервиса - http://browserling.com/ и http://browsershots.org/ Правда в функционале их не разбирался.
Расскажите, как Вы добиваетесь кроссбраузерности верстки? Всяческие материалы на тему сабжа приветствуются.

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Интересный вопрос. Но только, имхо, философский. Самый первый сайт делал знакомой. Не знал ничего. Недостаточно проверил. В итоге плагин jquery не работал в версии оперы, вроде 9.24... А в остальных работал. Мне до сих пор стыдно... и теперь мания на проверку всего и вся. Так вот когда набирал симы для mobile, то на половинах сайтах именитых производителей - глюки. Глюки - основа интернета)) Кроме браузеров влияет еще Adblock, Ghostery FF, некоторые переводчики у оперы дают розовое окно с кодом скрипта и т.п. сюрпризы "комплектованных" броузеров)) Один сайт упорно отказался работать на Linux у оперы, а везде норм. Т.е. зависит и система, и браузер, и начинка, и способ взаимодействия с инетом. В конце концов - у браузеров есть боковые, левые и т.п. вкладки которые отодвигают сайт, ломают разрешение и могут давать скроллбар. вы верстаете блок с рекламой или плагина вконтакте. Ghostery его режет - дырка. Так если посмотреть... если слишком-слишком заморачиваться - с ума сойти можно) Пока имею проблемы с яблосимами, симулятором чертовой нокии (она на Java 64 не хочет) и с blackberry симом. Везде глюки, глюки, глюки.. Раньше думал, что только линукс никогда ничего не ставит из коробки... ага..ага... Ну как можно проверить нормально сайт, если все везде кругом глючит и лагает... только эвристически)) И процессе эксплуатации... мда.. по-армейски вот так... Думается, что неплохо было бы потестить сайт у спец конторы.. но снг-бизнес развивается по своей, хитрож успешной стратегии и как вывод... если хочешь чтобы все было нормально - делай сам)) Вот такие грустные мысли :(

UPD. От.. вспомнил. вроде X-translate мог блокировать чаты и давать потусторонние блоки в стиле розовых пони))

Edited by bryknyk
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

  • Similar Content

    • By Ospna
      Решил анимировать иконки, нашел пример в интернете, скопировал

      в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично

      но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка
       
      пример кода
      пример того как должна выглядеть анимированная иконка во вложении
      Screen Capture 2018-01-10 06.49.14.mov
    • By Dmitrij
      http://test1.chpmodul.com.ua/
      столкнулся с такой проблемой:
      сначала сверстал сайт, все было нормально, а потом добавил в него медиа запросы @medai (max-width: 540px)
      и на интернет эксплорере верстка совсем сломалась.
      почему это случилось и как исправить?
    • By forest_moss
      всем привет.
      у меня появилась проблема того, что тень текста дико коверкается в сафари и в браузере телефона.
      неужели этого никак не избежать!?
      может, есть какие-нибудь решения, ведь наверно же с этим сталкивались многие другие?


      вот пример, здесь все минимизировано:
      скришот в разных браузерах:

      код:
      <!DOCTYPE html><html><head><meta charset="utf-8"> <title>font</title><style>    body{background: #e5e08b;}    p{    font-family: arial;    color: #ffe;    font-weight:bold;    text-shadow: 0 0 .1ex #ba0, 0 0 .1ex #870, 0 0 .1ex #870,    0 .7ex .1ex #fff,    2ex 0 .5ex #ffd, -2ex 0 .5ex #ffd;    }</style></head><body>        <p>Lorem ipsum</p></body></html>вот даже ссылка, если кому интересно.

      Есть идеи, как правильно обращаться с этой тенью???
      или хотя бы как исправить ситуацию в данном случае...
    • By roland
      Собственно код
      .enter {background: url("../img/enter.png"); display: inline-block; width: 170px; height: 42px; position: relative;margin-left: 20px;cursor: pointer; font-family: Arial, sans-serif; font-size: 20px; font-stretch: condensed; font-style: italic; font-weight: bold; color: #7F5B2B; line-height: 42px; text-align: center; text-decoration: none; text-shadow: 1px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text;}.enter:hover {background-position: 0 -42px;}.enter:active {background-position: 0 -84px;}<button class="enter" onclick="submit();" type="submit">ВОЙТИ</button><a href="{registration-link}"><div class="enter">РЕГИСТРАЦИЯ</div></a>Проблема в браузерах или в моих кривых руках?
    • By Feel
      Доброго времени суток.
       
      Задался проблемой соблюдения правил для верстки, не ломающейся при масштабировании в разных браузерах. Хотелось бы качестве результата темы получить что-то вроде набора  правил, придерживаясь которых верстка не будет ломаться при масштабировании в последних версиях популярных браузеров.
       
      Интересно услышать мнение как экспертов, так и тех кто уже сталкивался с такой проблемой и выработал навык оформления стилей, не дающих ломаться верстке при масштабировании страницы.
×
×
  • 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