Я бы порекомендовал вам сосредоточиться на том, что больше всего используется в данный момент.
На вашем месте я бы сосредоточился на том, чтобы научиться работать с современными браузерами, затем перейти к адаптивному дизайну и, наконец, перейти только к попыткам заставить работать старые браузеры.
Насколько я знаю, нет полной ссылки на тестирование / разработку между устройствами и кросс-браузерами. Вот почему вы можете выбрать вещи здесь и там и попытаться написать свои собственные заметки, свой собственный справочник.
Чтобы все работало в старых браузерах:
Теперь, в 2014 году, мы видим, что IE8 все еще используется в Интернете - я подозреваю, что это связано, главным образом, с большими компаниями, которые не обновляют стандартную ОС (и стандартный браузер, который входит в ее комплект), что оставляет работника без выбор, кроме как использовать IE8.
В любом случае, я бы сосредоточился на изучении кросс-браузерных решений на IE8 и IE9. IE10 + работает намного лучше, чем предыдущая версия, даже если он все еще не так хорош, как другие браузеры. Firefox, Safari и Chrome, как правило, обновлены, поэтому не нужно слишком беспокоиться о них. Обычно вы можете найти CSS, работающий в этих браузерах, просто с помощью небольшого поиска Google. CSS Tricks также отличная ссылка, т.е. http://css -tricks.com / сниппеты / CSS / кросс-браузер непрозрачности /
Опять же, хороший способ сэкономить время - это писать свои собственные заметки или сохранять ссылки на замечательные статьи / фрагменты кода. Какой бы способ вы ни выбрали, в evernote, в своем блоге или в другом месте.
Вот мои заметки, https://sites.google.com/site/adrienitnotes/html-css, я использую их почти ежедневно.
Лучше всего учиться на практике, но еще лучше учиться дополнительно после работы, проводя больше исследований, чтения и экспериментов. Не так много людей имеют / делают время, чтобы сделать это ... но это может иметь огромное значение.
Что касается кросс-браузерного тестирования, вы можете использовать browserstack . Microsoft теперь «поддерживает» набор браузеров, предоставив вам бесплатную пробную версию на 3 месяца (для веб-браузеров ОС Windows) http://www.modern.ie/en-us/virtualization-tools
Я создал этот вопрос, касающийся тестирования браузера IE на стеке браузера: Тестирование версий Internet Explorer в феврале 2014 года: стек браузера, соусница, ghostLab, ложка и другие инструменты
Что касается совместимости между браузерами, использование Modernizr определенно является подходом: Modernizr помогает вам проверить, какие функции поддерживают веб-браузер, и затем действовать соответствующим образом (т. Е. Загрузить библиотеку или, в худшем случае, отобразить «веб-браузер поддерживается "сообщение об ошибке). Однако вы хотите использовать его только для «некоторой» функции: каждый раз, когда вы загружаете дополнительную библиотеку, она замедляет загрузку вашей страницы и потенциально конфликтует с другой библиотекой. Вы должны прийти к компромиссу, который вам подходит.
Несколько вещей, которые я написал (действительно отметил) о HTML5, CSS3, Modernizr и Polyfills (polyfill: js shim, который копирует стандартный API для старых браузеров): https://sites.google.com/site/adrienitnotes/html-css/html5
Еще один совет: прочитайте много связанных с этим вопросов и ответов, которые имеют очень хороший рейтинг (только!), Т.е. Как дать тексту или изображению прозрачный фон с помощью CSS?
Удачи!
EDIT
Вот еще несколько вещей, которые пришли мне на ум за последние несколько месяцев:
Постарайтесь обратить внимание на качественные веб-сайты и сфокусируйтесь на них: в Интернете много неточного контента, убедитесь, что вы изучаете веб-сайты, которые известны своим качеством (например, csstricks, caniuse.com, mozilla .org, sitepoint.com, html5rocks.com, aListApart.com). Точно так же вы хотите знать общий веб-сайт, который появляется при поиске темы, но имеет плохое качество, их много (например, w3schools, см. w3fools.com )
Исследуйте авторов / разработчиков, ведущих в вашей области, постарайтесь найти их блог, их книги, видео, презентации, интерактивные курсы (если они дают). то есть. http://davidwalsh.name/
Узнайте о передовой практике. Это позволит вам сэкономить огромное количество времени, как в ваших проектах, так и в вашей карьере разработчика. Просто введите в Google "html хорошие практики" или "javascript хорошие практики" или "jQuery хорошие практики"
Изучите различия между похожими «вещами» на одном языке, вы, скорее всего, научитесь быстрее. (т.е. "jQuery: в чем разница между fadeIn () и fadeTo ()?"). Детали имеют значение.
Попробуйте некоторые онлайн-инструменты обучения, сейчас их достаточно, попробуйте пару: teamtreehouse.com и teamtreehouse.com/library, tutsplus.com, codecademy.com, www.coursera.org, gibbon.co/ потоки # программирование, khanacademy.org/computing/cs, udacity.com, academicearth.org, memrise.com/courses/english/computers-engineering/, edx.org, ocw.mit.edu, codeschool.com
Постарайтесь найти работу, где у вас есть наставник, кто-то может вас направить, посоветовать, ободрить. По моему опыту, обучение с хорошим наставником (у которого есть немного времени каждый день) может удвоить или утроить вашу скорость обучения .