Дэвид Макфарланд | Новая большая книга CSS (2016) [PDF]

Дэвид Макфарланд | Новая большая книга CSS (2016) [PDF]

---

Автор: Дэвид Макфарланд
Серия: "Бестселлер O’Reilly"
Издательство: Питер
ISBN: 978-5-496-02080-0
Жанр: Компьютерная литература
Формат: PDF
Качество: Изначально электронное (ebook)
Иллюстрации: Черно-белые
Количество страниц: 720

Описание:
Технология CSS3 позволяет создавать профессионально оформленные сайты, но тонкости этого языка могут оказаться довольно сложными даже для опытных веб-разработчиков. Полностью переработанное четвертое издание этой книги поможет вам поднять навыки работы с HTML и CSS на новый уровень; она содержит множество ценных советов, описаний приемов, а также инструкции, написанные в стиле справочного руководства.
Веб-дизайнеры, как начинающие, так и опытные, при помощи этой книги быстро научатся создавать красивые веб-страницы, которые при этом молниеносно загружаются как на ПК, так и на мобильных устройствах

Скриншоты:

Время раздачи: Пн-Пт с 18:00 до 7:00 Мск, Сб-Вс 24/2 (до появления первых 3-5 скачавших)

олег2999 писал(а):

и опять ничего про pointer-events...

старенькая статейка, может вам будет полезна

Подскажите, я вот немного не понял смысл текста (стр. 200):

----------

Добавьте следующие свойство:

Код: выделить все html { font-size: 62.5%; }

ПРИМЕЧАНИЕ
Зачем нужно устанавливать базовый размер шрифта веб-страницы равным 62,5 %? Оказывается, если умножить 62,5 % на 16 пикселов (стандартный размер шрифта текста большинства браузеров), получится 10 пикселов.

-----------

Вопрос, а не проще просто указать 10px? Зачем вся эта муть по расчету 10px?

BigTolly писал(а):

Зачем нужно устанавливать базовый размер шрифта веб-страницы равным 62,5 %? Оказывается, если умножить 62,5 % на 16 пикселов (стандартный размер шрифта текста большинства браузеров), получится 10 пикселов. Вопрос, а не проще просто указать 10px? Зачем вся эта муть по расчету 10px?

Когда вплотную будешь заниматься адаптивной версткой под мобильные устройства, этот вопрос отпадет сам собой. Потому чтотам размер шрифта в процентах используется очень активно, и это вовсе не муть.

derini, т.е. такое не помогает?

Код: выделить все <meta name="viewport" content="width=device-width, initial-scale=1">

BigTolly писал(а):

derini, т.е. такое не помогает? Код: выделить все <meta name="viewport" content="width=device-width, initial-scale=1">

Смотря что понимать под словом "помогает".)
Вам же придется в медиазапросах @media переопределять размер шрифта под размеры экранов. Если задавать в пикселях, то это не будет такой точный тюнинг. А если в медиазапросах задавать размеры (в том числе и шрифта) в относительных единицах, то они будут на дисплее точно в соответствиии с тем, какой размер экрана. vh, vmivw, vn, vmax - эти единицы созданы специально чтобы работать с viewport. Они дадут настоящую стопроцентную адаптивность, потому что являются процентами от видового экрана. Это чертовски удобно, надо просто один раз попробовать, и убедиться самому.)

derini, можно поподробнее, я что не очень понял мысль.
К примеру:

Код: выделить все <meta name="viewport" content="width=device-width, initial-scale=1"> + @media (min-width: 770px) {body{font-size:20px;}} @media (max-width: 770px) {body{font-size:10px;}}

получаем резиновый шрифт.

Вопрос-то был в

Код: выделить все html { font-size: 62.5%; }

зачем оно нужно? Я просто не специалист в css, поэтому и не могу понять что Вы мне объясняете, можно как-то попроще и с примером.

BigTolly в вашем примере кода шрифт не совсем резиновый. Медиазапросы задали размеры шрифта для двух областей экрана (экран больше 770 пиксей и экран меньше 770 пикселей). Внутри этих двух областей размер не будет изменяться. То есть при размере экрана 500 пикселей и 550 пикселей он будет одинаковым. Такая же ситуация при экранах например 800 пикселей и 900 пикселей - размер шрифта будет неизменным. Если у вас резиновый шаблон со сложной версткой, вполне может создаваться ситуация, что при каких-то размерах шрифт будет не помещаться в выделенном для него пространстве и корежить всю страницу.

Но если вы зададите родительскому элементу (например body) размеры шрифта в относительных единицах vw (которые являются процентами от ширины области просмотра), то тогда задавая всем дочерним элементам размер шрифта не в пикселях а в процентах, вы получаете реально на сто процентов резиновую верстку. То есть, переиначивая ваш пример, если задать для боди что-то типа такого:

Код: выделить все @media screen and (min-width: 1280px) { body {font-size: 1.1vw;} @media screen and (max-width: 1280px) { body {font-size: 1.8vw;}

то задавая для всех вложенных элементов размер шрифта в процентах, вы дадите им реальную изменяемость шрифта, реальную резиновость.
Извиняюсь, если косноязычен, "чукча не писатель, чукча читатель".

Все таки вопрос про font-size: 62.5%; не раскрыт!

Если так писать, то шрифт в разных браузерах имеет разный визуальный размер!
Если задать к примеру 10pt, то отображается везде одинаково.

BigTolly писал(а):

Все таки вопрос про font-size: 62.5%; не раскрыт!

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

Код: выделить все * {      font-size: 0; }

Потому что font-size должно быть таким, каким его зададите вы, а не такое, как оно установлено в разных браузерах. Тогда и отображаться будет во всех браузерах одинаково.

Лучше Мейера до сих пор ничего нет. Хотя она и старенькая.

morderum писал(а):

Лучше Мейера до сих пор ничего нет. Хотя она и старенькая.

Насчёт того, что лучше Мейера ничего нет - тут с вами полностью согласен.
Насчёт того, что она старенькая, но ведь вышел обновлёный справочник, вот старая версия книги:

Эрик Мейер | CSS - Каскадные таблицы стилей. Подробное руководство. [2008] [PDF]
А вот справочник:
Эрик А. Мейер | CSS. Карманный справочник (2016) [PDF]

Вышла обновлённая, 4-тая версия книги "Новая большая книга CSS" 2017
у кого есть, поделитесь пожалуйста

karpuk11, там тоже самое, что в 2016 года, скорее всего просто допечатали, так как книжки за 2016 год кончились.

derini, столкнулся тут с одной проблемой из-за этих 62.5%.
При пересчете media, наблюдаю скачек размера шрифта, а если использовать 10px, то все плавно.

html:

Код: выделить все <footer><h2>Заголовок</h2></footer>

css:

Код: выделить все footer { font-size: 10px; } footer h2 {font-size: 3em;} @media screen and (max-width: 1200px) {   footer {font-size: calc(5px + 0.416667vw);} }

Если я использую 62.5%, то в media формула: calc(31.25% + 0.416667vw)

Как я считал vw: 1200px это граница, 1vw равен 12px, следовательно в 10px 0.83333333vw, а так как я беру половину, а половину накидываю абсолютным значением, то получаю 0.416667vw.

Добавлено спустя 1 час 5 минут 20 секунд:

Ошибку нашел, у меня просто в другом подключенном файле был еще прописан размер для html.
Сложно, когда много кода, можно что-то просмотреть, для себя понял, что мне пока удобнее контейнер указать в абсолютном значении, а уже все что внутри относительно этого контейнера, тогда на медиа просто меняю размер у контейнера и все само меняется.

PS. Удалять свои сообщение не могу, так бы удалил.

Добавлено спустя 45 минут 9 секунд:

Что-то все равно не то.. Разный размер получается. Добавлено спустя 30 минут 9 секунд:

Размер получается одинаковый, только если я задаю 100% для html. Получается, что по умолчанию у html размер 10px, а не 16?

Добавлено спустя 2 часа 58 минут 42 секунды:

Вопрос решен, проблема была в том, что у меня в свойствах браузера был указан крупный шрифт.

BigTolly писал(а):

derini, столкнулся тут с одной проблемой из-за этих 62.5%. При пересчете media, наблюдаю скачек размера шрифта, а если использовать 10px, то все плавно. html: Код: выделить все <footer><h2>Заголовок</h2></footer> css: Код: выделить все footer { font-size: 10px; } footer h2 {font-size: 3em;} @media screen and (max-width: 1200px) {   footer {font-size: calc(5px + 0.416667vw);} } Если я использую 62.5%, то в media формула: calc(31.25% + 0.416667vw) Как я считал vw: 1200px это граница, 1vw равен 12px, следовательно в 10px 0.83333333vw, а так как я беру половину, а половину накидываю абсолютным значением, то получаю 0.416667vw. Ошибку нашел, у меня просто в другом подключенном файле был еще прописан размер для html. Сложно, когда много кода, можно что-то просмотреть, для себя понял, что мне пока удобнее контейнер указать в абсолютном значении, а уже все что внутри относительно этого контейнера, тогда на медиа просто меняю размер у контейнера и все само меняется. Что-то все равно не то.. Разный размер получается. Просмотр доступен только для зарегистрированных пользователей Размер получается одинаковый, только если я задаю 100% для html. Получается, что по умолчанию у html размер 10px, а не 16? Добавлено спустя 2 часа 58 минут 42 секунды: Вопрос решен, проблема была в том, что у меня в свойствах браузера был указан крупный шрифт.

Коллега, а вы не можете рассказать (расписать тут детальнее), как вы используете директиву медиа для всех размеров мониторов, при этом показать код? Спасибо заранее!!