Всем привет.
Сегодня мы поговорим о возможностях браузера и о том,
что вы можете сделать, чтобы ваши сайты имели постоянный внешний вид,
независимо от того, как люди обращаются к нему.
Поэтому, несмотря на то, что HTML5 действительно подталкивает разработчиков браузеров
ко всем этим согласованным реализациям, они действительно отличаются
по отображению и соблюдению новых тегов, которые выходят.
И по мере обновления и изменения браузеров и появления новых браузеров вам придется иметь
в виду, что не все смотрят на вашу страницу так же, как вы.
Таким образом, это ваша ответственность, чтобы убедиться, что ваша страница работает для широкой аудитории.
И хотя мы много говорили о доступности и разных способах
доступа к Интернету, это даже сводится к самым базовым реализациям браузера.
Итак, сначала давайте поговорим о том, как справляться с этими стилистическими различиями.
Самый простой способ устранить различия в браузере - это
сделать что-то, называемое таблицей стилей по умолчанию.
И в этой таблице стилей вы действительно войдете и
уничтожите любые настройки браузера по умолчанию для различных элементов, которые стилизованы.
Поэтому, когда вы войдете, и вы сделаете это, вы возьмете, P, H1, H2,
все заголовки, все разные семантические теги, и вы войдете, и вы скажете,
я хочу, чтобы они имели заполнение нуля и поля нуля.
Даже мои элементы списка не должны иметь никаких украшений вообще.
Так что, хотя это гарантирует, что у вас очень последовательный взгляд,
я должен признать, что это заставит вас страницу выглядеть абсолютно ужасно.
Но это цена, которую вы заплатите
, чтобы, когда вы начинаете писать свои собственные правила стиля, вы можете улучшить и
неизбежно улучшить, и ваша страница будет выглядеть лучше и лучше.
В противном случае, если вы не используете то, что мы называем этой таблицей стилей по умолчанию
, вы будете создавать свою страницу, и
вам будет очень трудно вспомнить, действительно ли вы проверили каждый элемент, который вы используете.
Одна из других вещей, о которых мы хотим поговорить, - это обработка того, что мы называем
неподдерживаемыми свойствами.
Итак, во-первых, мы знаем, что все браузеры не поддерживают все теги HTML5.
Вы уже видели это, в некоторых кодировках, которые вы сделали со мной.
Таким же образом, не все браузеры поддерживают все свойства CSS3.
Есть некоторые свойства, которые выглядят действительно круто в некоторых браузерах, но
они не обрабатываются по умолчанию в других браузерах.
Но есть способ обойти это во многих случаях.
И это то, что браузеры предлагают префиксы.
Поэтому иногда они называют их префиксами браузера, иногда префиксами поставщика, но
важно, что это действительно быстрое исправление для
обработки всех неподдерживаемых опций, которые вы можете столкнуться.
Теперь, когда я впервые увидел префиксы браузера, я был полностью запуган.
Я не знал, что происходит, и это выглядело немного странно,
и я чувствовал себя ленивым и не хотел с этим разбираться.
Но я здесь, чтобы сказать вам, на самом деле это очень, очень легко использовать эти префиксы.
Итак, давайте взглянем на то, о чем я говорю.
Вы использовали разные свойства, и браузер, надеюсь, только что работал.
Но теперь, для некоторых из этих свойств, вы собираетесь захотеть и добавить префикс или
немного перед ним, например webkit, moz, ms или o для Opera.
Каждый из этих префиксов говорит: эй, если вы находитесь в этом конкретном браузере,
это то, что мне нужно, чтобы вы сделали, чтобы получить внешний вид, который собирается дизайнер.
Итак, каковы некоторые из этих свойств, которые часто не поддерживаются?
Они включают column-count,
что является способом добавления нескольких столбцов в ваши абзацы или div.
Это действительно хороший способ разбить ваш текст, который отзывчивый.
Поэтому, если кто-то изменяет размер страницы, абзацы фактически изменяют размер.
У нас есть еще одна вещь, называемая пограничным радиусом, которую люди действительно любят
использовать, потому что она добавляет немного округленного края к границам ваших элементов.
Третьим вариантом будет градиент.
И градиент - это очень классный цвет фона, который позволяет цвету перейти
от одного оттенка синего до, возможно, серого или красного или чего-то в этом роде.
И это придает ему другой вид.
Теперь у
вас нет способа узнать, какие свойства поддерживаются, а какие нет.
Поэтому у меня есть эта ссылка здесь на сайт под названием caniuse.com.
И то, что делает caniuse.com, это перечисляет различные свойства и
сообщает вам, какие браузеры поддерживают их, а какие нуждаются в префиксах.
Так что это хорошая идея, чтобы проверить этот сайт, когда вы начинаете разрабатывать свою страницу.
Но пока давайте посмотрим на пример.
Поэтому в этом примере у меня есть файл prefixes.html.
И я просто хочу показать вам, как это выглядит как на Chrome здесь,
так и на Safari.
Они выглядят довольно похожими.
Но есть мало пробелов, в которых шрифт может не совпадать точно, или
некоторые интервалы могут не совпадать точно.
Поэтому, если я хотел избавиться от этого, если я действительно хотел убедиться, что
страницы выглядят точно так же, что я могу сделать, это добавить таблицу стилей по умолчанию.
Так что давайте спустимся сюда, и
я скажу, что я хочу использовать таблицу стилей по умолчанию.
И похоже, что это действительно сумасшедший файл, в котором я перечислил
все разные элементы.
И после этого, положить в такие вещи, как,
я не хочу никаких отступлений, я не хочу никаких отступлений.
Если у меня есть списки, избавьтесь от стиля списка.
Сделайте это действительно так уродливо, как вы можете.
Поэтому, если я вернусь сюда, вы можете не увидеть огромной разницы, потому что
браузеры уже довольно простые, но вы можете видеть, что вещи передвигаются немного.
Мы избавимся от чуть-чуть вещей.
Точно так же, когда я обновляю Safari,
они будут выглядеть немного похожи.
Итак, теперь давайте продолжим и
посмотрим на этот пример, где некоторые из свойств не поддерживаются.
И я собираюсь вернуться к своему HTML-файлу, и я собираюсь сказать, эй, я хочу
использовать свою таблицу стилей, чтобы идти вперед и стилизовать некоторые вещи, которые не всегда поддерживаются.
И то, о чем я говорю конкретно,
мы начнем с этой идеи подсчета столбцов.
Как работают column-count и column-gap, вы говорите браузеру,
сколько столбцов вы хотите и сколько пространства вы хотите между этими столбцами.
Так что теперь, когда я обновлюсь, вы можете видеть, что он перешел от
всего одного длинного блочного абзаца к тому, что все разделилось.
И это действительно круто, потому что это динамично.
Если я изменяю размер браузера, все движется вокруг.
И это действительно классный способ сделать это.
Одна из других вещей, которые я хотел бы добавить так же, как на что-то посмотреть, - это идея
вместо того, чтобы иметь квадрат, я хочу немного округлить края.
Таким образом, вы делаете это, добавив в то, что называется пограничным радиусом.
Теперь я остановлюсь, пока не обновлю страницу, потому что я хочу указать
вам кое-что на случай, если вы так же запуганы, как и я, когда я впервые начал это делать.
Радиус границы - это просто простое свойство, которое было вокруг некоторое время.
И вы можете увидеть это прямо здесь, и вы даете ему значение.
То же самое с количеством столбцов и пробелом столбцов.
Вся эта идея добавления префиксов просто означает, возьмите свое обычное свойство и
пощечините эти префиксы на него.
Вам не нужно учиться чему-либо новому, вам просто нужно запомнить имена префиксов.
И поэтому я хочу, чтобы ты действительно попытался принять это, и
понял, что ты не делаешь ничего слишком зрелищного.
Так что теперь, когда я сделал это, я сделал его 25.
И я пойду и освежу его.
И как вы можете видеть, я как бы изогнул разные края вокруг стороны,
что довольно круто.
Последнее, что я собираюсь сделать, это добавить градиент к цвету.
Так что прямо сейчас я синего цвета.
И важно, чтобы независимо от того, что вы даете своего рода цвет фона,
который вы хотели бы использовать, это случай, когда градиент не происходит.
Но теперь для линейного градиента вы просто даете два цвета, которые вы хотели бы
видеть и сказать, сколько вы хотите в начале и в конце.
Опять же, у меня обычный синий.
А теперь, когда я освежаюсь, я перехожу от синего до светло-серого.
Это круто, и это много кода, и играть с ним очень весело.
Поэтому я хочу напомнить тебе, что когда ты развиваешься, не пытайся запоминать вещи.
Не пытайся вспомнить, как все делать.
Я собираюсь щелкнуть правой кнопкой мыши здесь и проинспектировать элемент.
Потому что если позже вы решите, что это слишком кривая, или вам не нравится этот
цвет, то вы не хотите печатать, сохранить, обновить, ввести, сохранить, обновить.
Это становится очень раздражающим.
Вместо этого, я пойду прямо сюда, в свой раздел, и я собираюсь посмотреть,
и вы можете видеть в Inspect Element, что он сказал, что я не использовал префикс moz, и
я не использовал префикс Opera, потому что мне не нужно.
Я - Хром.
Что я могу сделать, так это спуститься к границе и изменить ее.
Вместо 25 пикселей, если я хочу меньше кривой, я могу сделать это 5 пикселей.
Вы можете видеть, что это происходит в реальном времени.
Если хочешь, чтобы это выглядело безумно, можешь сделать это 50 пикселей.
Вы также можете использовать проценты, если хотите.
Так что я иду вперед и поставлю 15%.
Таким образом, это своего рода играть со всеми этими вещами динамически, а затем,
как только вы получите значение, которое вам действительно нравится, скопируйте его и поместите в свой файл CSS.
Таким образом, префиксы браузера - это просто то, с чем играть может быть весело.
Это может быть разочаровывает.
Но самое главное, чтобы вы поняли, что это очень просто.
Одна из вещей, которые вы можете сделать, когда вы добавляете префиксы, заключается в том, что понимают
, что прямо сейчас, самое простое для вас сделать, это добавить эти префиксы вручную.
Положи в собственность, которую ты хочешь поставить, скажем, пограничный радиус.
А затем войдите и добавьте webkit, moz, разные вещи вроде этого.
Когда вы начинаете использовать префиксы,
то, что вы собираетесь сделать, это вы собираетесь добавить их вручную.
Если вы знаете, что у вас есть пограничный радиус, вы собираетесь идти вперед и сделать пограничный радиус,
а затем добавить этот моз, веб-кит, разные вещи вроде этого вручную. По мере того ,
как вы становитесь более опытными и, возможно, вы хотите попробовать разные вещи,
есть способы автоматизировать добавление этих префиксов.
Если вы используете редактор, такой как Sublime,
вы можете фактически поместить туда маленькие пакеты, где вы можете контролировать,
хотите ли вы Sublime добавлять в эти пакеты всякий раз, когда они видят разные свойства.
Вы также можете использовать внешние программы, которые будут динамически изменять ваш код,
когда люди загружают его, чтобы помещать только те префиксы, которые им нужны.
Если вы помните в моем примере, хотя я использовал Chrome,
моя таблица стилей все еще имела разные префиксы.
Это автоматически добавит только те, которые вам нужны.
Опять же, это круто, но давайте не будем беспокоиться о них прямо сейчас.
А пока давайте сосредоточимся на основах.
Итак, чтобы просмотреть, когда вы начинаете кодирование,
когда вы начинаете создавать таблицы стилей, вы собираетесь
подумать об использовании таблицы стилей по умолчанию, чтобы удалить эти стилистические различия.
И когда вы это сделаете, мне нужно, чтобы вы подумали о некоторых вещах.
Итак, во-первых, должна ли эта таблица стилей по умолчанию быть внутренней или внешней?
И, надеюсь, вы все сказали внешнее.
Потому что, если он внутренний,
он переопределит все остальные вещи, над которыми вы так упорно работали.
Таким же образом, когда вы поместите ссылку на таблицу стилей по умолчанию,
убедитесь, что она первая.
Потому что способ работы браузеров - это таблица стилей, таблица стилей, таблица стилей.
Поэтому, если вы сначала положите свой, а затем таблицу стилей по умолчанию,
он перезапишет все круто, что вы сделали до сих пор.
Наконец, помните, что префиксы браузера
могут помочь удалить некоторые из этих различий, вызванных неподдерживаемыми параметрами.
Но ты не хочешь злоупотреблять этим.
Не шлепайте префикс на каждое свойство только потому, что вы не уверены.
Вместо этого, вы хотите пойти на эти сайты, как я могу использовать и протестировать его и
действительно сделать обоснованное предположение о том, хотите ли вы его использовать или нет.
Ты действительно уходишь далеко в этой идее веб-разработки.
И, надеюсь, вы ставите действительно классные страницы.
И я хочу, чтобы вы могли использовать все различные свойства, которые там есть.
Поэтому не пугайтесь идеи, что вам, возможно, придется использовать таблицы стилей, которые
вы не написали, или что вам нужно использовать префиксы браузера.
У вас есть это, и я знаю, что вы можете кодировать, используя эти разные инструменты.
Так что удачи.