Уже более года я веду живые сеансы чата Talk с экспертами на различных платформах, но сегодня мы решили попробовать что-то немного другое. Мы приглашали вас спросить ветерана CSS-дизайнера и разработчика Алекса Уокера на каждый вопрос о вашем стиле. Алекс был в нашей блестящей новой комнате для чата, чтобы помочь вам с липкими вопросами и грязным кодом. Сессия была насыщенной, но Алекс справился с ней с уравновешенностью, и нам удалось покрыть огромную сумму за одночасовое занятие.
Если вы пропустили это, ниже приведен список ресурсов (и несколько довольно удивительных примеров CSS), которые вышли из сессии, с последующей полной расшифровкой того, как все прошло.
Потрясающий пример CSS-анимации от @newberg
Умный эксперимент CSS3 Китом Кларком
Что МЕНЬШЕ и Sass ?
Вот статья, которая сравнивает два.
Запустите в LESS новый курс по обучаемости
Чтобы узнать больше о Sass, не забудьте присоединиться к нашей предстоящей сессии с Алексом 19 июня
Scout — отличное кроссплатформенное приложение SASS (если вы хотите избежать изучения Rails)
Или вы можете попробовать CodeKit, если вы на Mac и не возражаете заплатить небольшую плату
График готовности HTML5 для браузеров
Статья о перезагрузках и хорошая справка для медиа-запросов
И, наконец, что касается этих сессий, вы можете проверить расписание здесь или подписаться на напоминания о будущих сессиях здесь.
И для тех из вас, кто хотел бы прочитать полную стенограмму сегодняшней сессии, вот она:
[21:19] <HAWK> Добро пожаловать, Алекс
[21:19] <alexmwalker> Спасибо, Хоук. Всем привет.
[21:20] <alexmwalker> с кофеином и готов к рок
[21:23] <alexmwalker> Все видели, как MacBook демонстрирует CSS-анимацию @neoberg?
[21:23] <alexmwalker> http://cssdeck.com/labs/css-only-macbook-air
[21:23] <alexmwalker> очень классная работа
[21:23] <HAWK> Ух ты! Это довольно круто, alexmwalker
[21:24] <alexmwalker> один png для экрана. один SVG для логотипа яблока. Остальное чистое CSS.
[21:25] <Toffy> Как расположить несколько делений по горизонтали в адаптивном дизайне
[21:26] <HAWK> Итак, alexmwalker, ты готов начать? Похоже, Тоффи задал вопрос.
[21:26] <Toffy> извини, я так быстро отправил вопрос без приветствия
[21:26] <HAWK> Не беспокойся, Тоффи 🙂
[21:27] <alexmwalker> Я. Привет тоффи Так вы говорите, скажем, о нескольких горизонтальных столбцах?
[21:28] <Toffy> ну, больше похоже на контейнерный div, если у меня есть несколько div, которые должны быть отцентрированы и равномерно распределены между ними в адаптивном проекте, мне трудно сделать это
[21:29] <Toffy> У меня нет примера ссылки, но, скажем, на странице, подобной этой, я хочу поместить 3 делителя в центр, и они должны оставаться в центре, даже если я уменьшу размер экрана
[21:30] <Джерри> Тоффи: Дивы уложены вертикально, и каждый должен быть центрирован горизонтально?
[21:30] <Toffy> они не сложены
[21:30] <Toffy> рядом друг с другом
[21:30] <Toffy>, если я плаваю на них, то трудно отцентрировать
[21:30] <alexmwalker> Да, так вы устанавливаете их автоматические поля слева и справа?
[21:30] <Toffy> но я должен отпустить их, чтобы быть рядом друг с другом
[21:30] <mamoru> Не могли бы просто создать его с помощью «абсолютной позиции»? осталось: 50% деления внутри -50%? Я не совсем понял вопрос, но это в основном то, что я делаю
[21:31] <Jerry> Являются ли div’ы фиксированной ширины?
[21:31] <Toffy> да, я обычно плаваю слева слева и справа справа, а затем в центре с полем auto
[21:31] <Toffy>, но хотел знать, есть ли другой способ
[21:31] <johnlacey> Q: Что такое SASS и LESS? И мы должны их использовать?
[21:31] <Toffy> div не исправлены
[21:31] <Toffy>, поэтому это тяжело
[21:31] <alexmwalker> А, хорошо, значит, их 3 на экране? Попался
[21:31] <Toffy> да
[21:32] <Murali> Привет, Алекс, у меня есть контейнерный элемент div с двумя дочерними элементами (заголовок и тело). Контейнер имеет полосы прокрутки. Я хочу, чтобы заголовок div был зафиксирован сверху, и только тело div должно прокручиваться.
[21:32] <ralphm> Если вы поместите их в контейнер, вы можете настроить их на отображение: inline-block и контейнера для text-align: center;
[21:32] <Toffy> работает ли inline-block в ie7?
[21:32] Пример <Murali> на http://cssdeck.com/labs/gomiazlb
[21:32] <Мурали> это возможно?
[21:33] <Джерри> Тоффи: От чего зависит ширина div?
[21:33] <alexmwalker> Так что я думаю, что я буду пытаться придать форму контейнеру и сделать так, чтобы он равномерно заполнял контейнер (примерно 33% каждый)
[21:33] <HAWK> Джонласи и Мурали — я поставил твои вопросы в очередь за Алекса
[21:33] <johnlacey> Спасибо, Хок.
[21:33] <Toffy> я думаю, что вы установили zoom: 1 или что-то в ie 7, чтобы inline-block работал, но я не уверен, еще не пробовал
[21:34] <jcollado> HAWK: На какой вопрос сейчас отвечают?
[21:34] <ralphm> @Toffy Не для блочных элементов (если я помню). Но IE7 имеет менее 1% пользователей. В любом случае, если вам нужно поддерживать этот браузер, просто отцентрируйте контейнер с шириной и автоматическими полями и поместите в него элементы div.
[21:34] <alexmwalker> Привет, @johnlacey. Хороший вопрос.
[21:35] <HAWK> jcollado Мы просто задаемся вопросом Джонсла: Q: Что такое SASS и LESS? И мы должны их использовать?
[21:35] <jcollado> HAWK: Хорошо, спасибо
[21:36] <Paul> Toffy Вы можете заставить работать inline-block в IE7 и ниже, установив элемент display: inline, а затем добавив haslayout. Смотрите комментарии в ссылке на Sitepoint http://reference.sitepoint.com/css/display
[21:36] <HAWK> Привет тем из вас, кто только что присоединился — мы собираемся говорить SASS и LESS. Если у вас есть вопросы к Алексу, добавьте их в любое время, и я поставлю их в очередь
[21:36] <HAWK> К вашему сведению, вы также можете @ отмечать людей, чтобы привлечь их внимание
[21:36] <alexmwalker> Они оба являются большим улучшением в написании CSS. Если вы знакомы с написанием CSS, то вам определенно стоит добавить один из этих препроцессоров в ваш рабочий процесс.
[21:36] <alexmwalker> Они в основном позволяют делать вещи с помощью CSS, что невозможно с помощью.
[21:37] <HAWK> Джонласи — я не знаю, заметили ли вы, что мы только что запустили курс LESS в Learnable
[21:37] <johnlacey> Спасибо @Hawk
[21:37] <RobertRM> Определенно фанат LESS
[21:37] <RobertRM> хотя SASS кажется более мощным?
[21:37] <alexmwalker> Я крутой парень, в основном потому, что здесь мы используем много рельсов, и это идет с газоном. Это также, вероятно, имеет больший импульс с точки зрения развития.
[21:38] <Джерри> Я не знаком с SASS. Можете ли вы дать краткое сравнение двух?
[21:38] <Jason> Алекс, в чем разница между селектором CSS с тегом перед классом или после класса? Пример: в чем разница между h3.myclass {} и .myclass h3 {}?
[21:38] <HAWK> Привет тем из вас, кто только что присоединился. Не стесняйтесь задавать вопросы в очереди в любое время. 🙂
[21:39] <alexmwalker> Должен сказать, что у Less есть более приятный и аккуратный синтаксис. Если вы начинаете с нуля, я не думаю, что имеет значение, какой вы выберете.
[21:40] <alexmwalker> RobertRM да, я думаю, что SASS и некоторые библиотеки, которые помогают SASS, более продвинуты, чем Less
[21:41] <Jerry95> @ Джейсон Я знаю, что ты отправил вопрос Алексу, но я уверен, что это очень просто. Тег перед классом будет означать все h3, к которым применяется этот класс, а класс, за которым следует тег, будет означать всех потомков этого класса с указанным тегом.
[21:41] <Jerry95> ¿Что такое Sass and Less?
[21:42] <alexmwalker> Джейсон, да, Джерри в значительной степени освещал этот вопрос.
[21:42] <felgall> см. Http://lesscss.org/ и http://sass-lang.com/
[21:42] <mamoru> Jerry95 подумал о переменных в CSS, если говорить коротко
[21:42] <alexmwalker> Хорошо, так что Sass and Less очень интересны.
[21:43] <alexmwalker> Я немного о них расскажу.
[21:43] <Jerry95> Так что это похоже на PHP (Pre-Hypertext Processor) только с CSS?
[21:43] <Джерри> Спасибо, Фелгалл
[21:43] <HAWK> Спасибо, Фелгалл 🙂
[21:43] <mamoru> @HAWK: Будет ли транскрипт опубликован для этого где-нибудь после? Я действительно должен идти спать сейчас, потому что здесь полночь 🙂
[21:43] <alexmwalker> CSS — классный язык, но он ограничен во многих отношениях, и W3C требуется много времени, чтобы что-то улучшить.
[21:44] <mamoru> Джерри95 вроде
[21:44] <Jay> Просто любопытно: многие из вас используют шаблоны или фреймворки? Я искал несколько, но не знаю, что мне следует расследовать дальше
[21:44] <HAWK> Да, мамору, я выложу его на SitePoint сегодня вечером. Спасибо, что присоединились к нам. 🙂
[21:44] <kcs> Я относительно новичок в веб-дизайне и CSS, не могли бы вы порекомендовать мне сосредоточиться на основах CSS, прежде чем переходить на Sass или Less?
[21:44] <alexmwalker> Sass и LESS — это языки, которые очень похожи на CSS, но имеют новые мощные функции.
[21:44] <mamoru> Спасибо HAWK, продолжайте в том же духе 🙂 Если я буду свободен на следующий день, я сижу через весь чат 🙂
[21:45] <mamoru> @jay Twitter Bootstrap и flattrap littlesparkcvt
[21:45] <alexmwalker> Когда вы пишете свой Sass (или меньше), он в конце концов конвертируется в стандартный CSS.
[21:45] <ralphm> @kcs Я бы определенно сказал, зарабатывай, как работает CSS, прежде чем путать проблему с LESS или SASS.
[21:45] <alexmwalker> Так что браузеры все еще могут читать его, но у вас есть новые способы сделать что-то
[21:47] <johnlacey> Итак, где происходит преобразование, и нужно ли вам что-нибудь (возможно, на уровне сервера) для достижения этой цели?
[21:47] <Jerry95> Можно ли будет использовать SASS или LESS с XSLT, скажем, например, если есть тег, который является дочерним по отношению к другому, затем применить какое-то правило CSS, если нет, применить другое правило?
[21:48] <HAWK> Мурали — мы ответим на ваш вопрос в конце, когда все немного успокоится. Если вы не можете торчать, напишите мне адрес электронной почты 🙂
[21:48] <kkl> Я дизайнер, который очень хорошо разбирается в HTML / CSS (не на вашем уровне), желая перейти на JS дальше. Должен ли я сначала изучить JS, а затем jQuery? Или наоборот? Любые ресурсы / книга настоятельно рекомендуется?
[21:48] <kcs> Спасибо. ralphm.
[21:48] <ScallioXTX> Jerry95, вы можете сделать это из коробки с помощью css без каких-либо дополнительных или навязчивых действий. просто сделайте .class1 .class2, который будет нацелен на все элементы класса class2, которые являются дочерними узлами class1. глубина не имеет значения.
[21:48] <Мурали> НП. Я подожду.
[21:49] <Jay> @johnlace: у меня нет большого опыта работы с ними, но из того, что я видел, они «скомпилированы» в действительные css перед загрузкой на ваш сервер. Итак, в конце концов, вы остались с чистым CSS
[21:49] <alexmwalker> Джонласи Сасс появляется при установке Ruby on Rails. Но есть довольно много приложений для рабочего стола, которые просматривают ваши папки и конвертируют ваш Sass в CSSS каждый раз, когда вы сохраняете его.
[21:49] <HAWK> Добро пожаловать в тех людей, которые только что присоединились. Не стесняйтесь задавать вопросы в любое время. В настоящее время мы говорим о SASS и LESS, но другие вопросы будут поставлены в очередь.
[21:49] <Jerry95> Tnanks ScallioXTX. Может кто-нибудь привести еще один пример того, что может сделать SASS из МЕНЬШЕ
[21:50] <bsteffl> @mamoru Я слышал, что при загрузке в Твиттере не обязательно правильно использовать HTML-элементы, это был твой опыт?
[21:50] <alexmwalker> Я бы порекомендовал проверить Scout — он бесплатный и работает практически на всех системах. Codekit очень хороший, но я думаю, что это около 50 долларов
[21:50] <alexmwalker> http://mhs.github.io/scout-app/
[21:51] <kkl> CodeKit того стоит.
[21:51] <alexmwalker> ккл согласился
[21:51] <ScallioXTX> bsteffl, что бы вы ни строили в HTML, всегда найдется тот, кто считает, что это неправильно. Выберите битвы, которые стоит сражаться.
[21:51] <RobertRM> Jerry95 LESS позволяет писать CSS быстрее и удобнее в обслуживании
[21:52] <ralphm> @kkl jQuery облегчает начало работы с JS, но в идеале узнайте, как работает JS, по крайней мере, позже, если не сначала.
[21:52] <HAWK> На Learnable есть множество ресурсов JavaScript и JQuery 🙂
[21:52] <ScallioXTX> Лично я нахожу, что LESS слишком абстрагирован от CSS, и конечный результат гораздо более раздутый, чем если бы я написал это сам. Хотя я согласен, что писать в LESS проще, чем чистый CSS.
[21:53] <bsteffl> отличный scallioxtx спасибо
[21:53] <MikeT> Кто-нибудь что-нибудь знает о WordPress Live Preview?
[21:53] <Jerry95> Может ли LESS проверить наличие дублирующихся классов или идентификаторов в большой таблице стилей?
[21:53] <alexmwalker> Jerry95 — если вы пишете те же самые префиксы браузера (-webkit-, -moz) — sass позволяет записать это как «mixin», а затем вызывать его одной строкой каждый раз, когда вы хотите Это
[21:54] <kkl> Хотя это статья LESS vs SASS, она показывает, что могут делать эти препроцессоры.
[21:54] <kkl> http://css-tricks.com/sass-vs-less/
[21:55] <alexmwalker> Вы получаете преимущества, как только начинаете использовать 5% языка — со временем, которое становится все лучше
[21:55] <HAWK> У кого-нибудь еще есть вопрос, который он хотел бы задать в миксе?
[21:55] <johnlacey> Wow SASS выглядит очень мощно. Спасибо за ссылку @kkl
[21:55] <HAWK> Или примеры удивительного CSS, который они видели …
[21:56] <kkl> ты это видел?
[21:56] <kkl> http://www.keithclark.co.uk/labs/css3-fps/
[21:56] <kkl> это потрясающе.
[21:56] <alexmwalker> kkl, jquery решит многие твои проблемы немедленно. Вы будете делать вещи, и это круто и очень мотивирует.
[21:57] <kkl> alexmwalker, так что вы рекомендуете сначала мне взломать jQuery?
[21:57] <Nancy> Как вы, ребята, не отстаете от функций CSS3 по мере их появления? Считаете ли вы себя проверяющим новые функции, когда вам нужно что-то делать или, как я, — выполнять поиск в Интернете и работать над ними какое-то время, только чтобы обнаружить, что есть новые и более простые улучшения с использованием html5 / css3?
[21:57] <kkl> тогда познакомиться с базовым JS?
[21:57] <NIteFlite> Говоря о HTML5 и CSS3, какие современные браузеры могут их обрабатывать?
[21:57] <alexmwalker> В конечном итоге, если вы хотите стать идеальным фронтменом, вам бы хотелось стать гуру JS, а это означало бы начать с JS.
[21:58] <alexmwalker> Я счастлив быть парнем из jquery, и я нахожу помощь, когда мне нужна чистая сила JS 🙂
[21:58] <NIteFlite> А так как вы упомянули JavaScript и JQuery, что может привести к тому, что один или оба из них просто перестанут нормально функционировать на веб-сайте … не на локальной машине, а на рабочем сервере?
[21:59] <johnlacey> Кто-нибудь может порекомендовать какие-либо инструменты для работы с простой анимацией CSS3?
[21:59] <Jerry95> Спасибо всем, я немного запутался, но что еще вы можете сделать с LESS и SASS, кроме миксинов и циклов. Можно ли спланировать каскад заранее, если у вас есть HTML?
[21:59] <Nancy> html5 таблица готовности css3 для браузеров http://html5readiness.com/
[22:00] <felgall> jQuery — это JavaScript, поэтому для правильного использования jQuery необходимо знать минимум JavaScript. Он работает на локальном компьютере, а не на сервере, поэтому он не собирается прекращать работу на сервере — но он может не работать в браузере, если он содержит ошибку или использует команду, которую конкретный браузер не понимает
[22:00] <ralphm> @NIteFlite Все текущие браузеры, кроме IE *, в некоторой степени поддерживают HTML5 и CSS3, постоянно добавляя биты. Вы можете проверить поддержку каждой функции на http://caniuse.com/
[22:00] <alexmwalker> NIteFlite С jquery, возможно, ваш jquery libray, но поврежден. Но ничто на сервере не могло помешать работе javascript — потому что JS работает в вашем браузере.
[22:01] <johnlacey> IE всегда проблема. лол
[22:02] <Jerry95> @NiteFlite, я не эксперт по веб-интерфейсу, но я могу думать только о том, что Jquery не работает должным образом по двум причинам: либо версия, предоставленная сервером, слишком старая, что решается CDN или библиотека сталкивается с другой библиотекой JS, поэтому вам следует использовать метод noConflict.
[22:02] <ralphm> (я хотел набрать «кроме IE8» выше)
[22:03] <kkl> Конечный пользователь может отключить запуск скриптов.
[22:04] <Jerry95> @ Да, кроме того, кто-нибудь знает, какой последний или самый современный способ проверки Javascript включен?
[22:04] <ralphm> @kkl В идеале, убедитесь, что страница работает приемлемо с выключенным JS. Тогда, если у пользователя это выключено, нет проблем.
[22:05] <alexmwalker> Нэнси — я склонен узнавать о новых функциях, когда ppl использует их в демонстрациях / примерах и т. Д. — большую часть времени это уже впереди, когда я смогу использовать их в производстве. Но, может быть, через 18 месяцев они столкнутся с трудностями, и я поищу в Google, где я видел этого парня, использующего это странное свойство CSS.
[22:06] <kkl> Для кросс-браузерных проблем попробуйте Modernizr … это удивительно …
[22:06] <kkl> особенно, если вы пишете HTML5 / CSS3
[22:06] <HAWK> Добро пожаловать всем, кто только что присоединился. Пожалуйста, не стесняйтесь задавать вопросы в любое время — я поставлю их в очередь, и они не должны быть в контексте 🙂
[22:06] <Nancy> Спасибо, alexmwalker
[22:06] <kkl> всего одна строка JavaScript исправила все мои проблемы.
[22:06] <HAWK> Я также опубликую полную расшифровку стенограммы в SitePoint позже сегодня
[22:07] <Jerry95> @kkl Спасибо, я проверю модернизр
[22:07] <ralphm> @kkl Modernizr не добавляет функциональности там, где ее нет. Вы все еще должны решить, что произойдет, если функции не поддерживаются.
[22:08] <Jerry95> Итак, снова говоря о SASS и LESS, можете ли вы заранее запрограммировать, какие правила использовать, если в конкретном браузере не поддерживается какое-либо правило?
[22:08] <alexmwalker> johnlacey — я считаю, что лучший способ научиться CSS-анимации — следить за CSSdeck.com и codepen.io и посмотреть, как их использует ppl. Вы можете скопировать код в свое собственное окно, разобрать его и посмотреть, как он работает.
[22:09] <alexmwalker> Эти игровые площадки кода также обрабатывают кросс-браузерный префикс для вас, что очень помогает SOOOO, когда вы учитесь
[22:09] <NIteFlite> Но мои проблемы не только локальные … Все видят те же проблемы, что и я … Функциональность, которая была в порядке, вдруг не работает, так что это не что-то локальное. И это непостоянно и непоследовательно. Тьфу.
[22:11] <yyy> @NiteFlite ты пытался выключить его снова?
[22:11] <lori> Я пытаюсь выполнить медиа-запрос. Вы их обсуждали? Я только что пришел .. @media (max-width: 320px) подумала, что я могу сделать отображение div, если окно будет 320 или меньше, то есть iphone5.
[22:11] <alexmwalker> NIteFlite. Если ты слоняешься после того, как я с удовольствием проколола сайт и посмотрю, смогу ли я что-нибудь заметить
[22:11] <HAWK> Нет, у нас нет Лори — я поставлю в очередь ваш вопрос 🙂
[22:12] <lori> заставь div не показывать, я имею в виду.
[22:13] <kkl> мы можем поговорить о карьерных возможностях? Люди нанимают только для навыков HTML / CSS? Если так, то где? Или нужен jQuery / JS?
[22:13] <Jerry95> Так что, может быть, кто-то может ответить, что вы можете сделать с: after и: before свойствами?
[22:13] <NIteFlite> Да, попытался включить и выключить его. Избавились от посторонних кастомных JS. Я работаю над поиском любых ошибок, которые можно исправить. Некоторые вещи были исправлены. Другие остаются загадкой.
[22:15] <alexmwalker> Jerry95 — нацеливание на браузеры, если чаще всего я использую модернизатор. Это требует, чтобы вы установили javascript на своей странице, но позволяете вам писать правила CSS вроде ‘.ie10 h1 {some css)
[22:15] <NIteFlite> alexmwalker — мне нужно идти, на этот раз. Но если есть способ, которым я могу связаться с вами, для вашего удобства я не буду занимать здесь больше времени… 🙂
[22:15] <alexmwalker> другие браузеры не получат этот класс, поэтому они будут игнорировать это правило
[22:16] <ralphm> @ Jerry95 Вы можете делать удивительные вещи с: before и: after. В основном у вас есть два крючка для элемента, который вы можете использовать для выполнения каких-либо задач — установки стилей, добавления контента — без использования дополнительных элементов. (Однако не все элементы поддерживают их.)
[22:16] <johnlacey> alexmwalker: Вы бы порекомендовали использовать сброс CSS?
[22:17] <Paul> Jerry95 Вы можете делать много вещей с: before и: after. Вы можете добавить дополнительный текст или изображения к элементам, но их не следует использовать для добавления «реального контента», как это должно быть в html.
[22:17] <Jerry95> alexmwalker Спасибо, но я имел в виду, как я могу быть в курсе свойств, которые мне нужно проверить в JS, чтобы проверить совместимость конкретного браузера. Я считаю, что вести учет большинства из них очень трудно
[22:17] <jessirwin> Вам часто нужно указывать браузер, отличный от IE? Т.е. зачем использовать modernizr для таргетинга браузеров, когда вы можете использовать условные комментарии, чтобы поставить, например, имена классов (как это делает html5boilerplate)?
[22:17] <lori> до: после css3?
[22:17] <Jerry> Как браузер поддерживает до и после? Когда посмотрел (некоторое время назад) это было довольно пятнистым, поэтому я передал их
[22:18] <Jerry95> Да, я думаю, html5boilerplate — это вариант, но не только для html5?
[22:18] <ralphm> @lori Нет,: before и: after являются частью CSS2. Они были вокруг в течение долгого времени.
[22:18] <alexmwalker> @lori Я почти уверен: до и после поддерживаются вплоть до IE7.
[22:18] <jessirwin> Правда, это шаблон html5, но для xhtml наверняка можно использовать те же условные комментарии
[22:18] <jessirwin> IE7 не поддерживает: до и после
[22:19] <jessirwin> Если я не делаю что-то не так …
[22:19] <lori> есть ли учебник о них, о котором ты знаешь? Я только что видел отличный на! Не селектор
[22:19] <Павел>: после и: до того, как ie8 +
[22:19] <Jerry95> @jessirwin Спасибо, я довольно отстал в том, что делает html5
[22:19] <alexmwalker> Джессирвин — уверен, если да, но это немного глючит
[22:20] <Paul> lori: после и до css2
[22:20] <TaoistTotty> Курс Styling Forms с CSS на обучаемых обложках: до и после
[22:21] <lori> спасибо
[22:21] <Paul> Нет, в iE7 нет поддержки http://reference.sitepoint.com/css/pseudoelement-before
[22:22] <alexmwalker> @ paul спасибо, должно быть, думаешь о другом
[22:22] <HAWK> Итак, у нас осталось чуть более 5 минут сеанса — есть ли вопросы, которые люди задавали, на которые еще не ответили?
[22:22] <Paul> alexmwalker — не беспокойся, я тоже никогда не отследю
[22:23] <johnlacey> @alexmwalker: Вы бы порекомендовали использовать сброс CSS?
[22:23] <lori> У меня было сообщение о том, что медиа-запрос @media (max-width: 320px) для меня не работает для iphone5
[22:23] <NIteFlite> alexmwalker — Мне пора. Могу ли я получить какой-то контакт, чтобы написать вам позже?
[22:23] <HAWK> NIteFlite вы можете получить Алекса в Твиттере @alexmwalker
[22:24] <NIteFlite> Хорошо, спасибо. WCW
[22:24] <alexmwalker> johnlacey о перезагрузках, я рекомендую их, но мне нравится урезанная версия. HTML шаблонная версия, если она очень длинная, и тяжело разобраться со всем этим кодом
[22:24] <Paul> alexmwalker — ты уже нашел способ анимировать в автоматические измерения? Кажется, это именно то, что нужно, но не поддерживается.
[22:24] <HAWK> Ах да — спасибо Лори
[22:25] <lori> Я хотел, чтобы показ: ни один для div не показывался в маленьком окне
[22:25] <alexmwalker> Джонласи, эта статья — разумный подход к перезагрузке http://csswizardry.com/2011/10/reset-restarted/
[22:26] <johnlacey> Спасибо @alexmwalker
[22:26] <Murali> я задал вопрос о перекрывании ребенка с абсолютным положением
[22:26] <HAWK> Хорошо, я думаю, что мы посмотрим на вопрос Лори, а затем на ваш Мурали — и тогда мы закончили на сегодня 🙂
[22:27] <jessirwin> lori для iPhone или смартфонов с разрешением 320 пикселей (минимальная ширина устройства: 320 пикселей)
[22:27] <lori> ОК, попробую. Благодарность
[22:27] <jessirwin> @lori. Хорошая ссылка, которую я всегда проверяю на наличие медийных запросов: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
[22:27] <Jerry95> Хорошо, спасибо вам всем. HAWK вы можете сказать, где будет ссылка на стенограмму. Потому что есть много ресурсов, чтобы проверить
[22:27] <ralphm> @lori @media only screen и (max-width: 480px) {}, а также, для хорошей цели, включите это в заголовок своих страниц: <meta name = ”viewport” content = ” ширина = ширина устройства»>
[22:27] <alexmwalker> @lori, нет причин, почему это не должно работать. вы бы установили ‘max-width: 320px {display: none)’
[22:28] <HAWK> Это будет на sitepoint.com Jerry95
[22:28] <alexmwalker> хороший ральф 🙂 точно
[22:28] <HAWK> Спасибо всем, кто присоединился к нам сегодня. Мы проводим эти сессии еженедельно (на разные темы)
[22:28] <Paul> lori — убедитесь, что медиазапрос соответствует оригинальным правилам, чтобы вы не отменили его. Каскадный стиль применяется к медиа-запросам
[22:29] <lori> ну, максимальная ширина не работает, так что, я думаю, я попробую min-device-width и посмотрю, работает ли это?
[22:29] <ralphm> @lori Я хотел сказать, что максимальная ширина: 480px (или 560px для iPhone5) будет охватывать оба представления на iPhone.
[22:29] <alexmwalker> @lor не могли бы вы вставить свой код в CSSdeck или codepen?
[22:29] <lori> Мне нужно только, чтобы оно не отображалось на портрете, потому что элемент больше его.
[22:29] <alexmwalker> Мурали — сейчас смотрит на твой код 🙂
[22:30] <Jerry> Спасибо, Алекс, Хоук и все остальные респонденты. Хорошая сессия!
[22:30] <ralphm> @lori Хорошо, тогда просто измените то, что я написал, на максимальную ширину: 320 пикселей. Но вы также можете изменить размер элемента, а не скрывать его полностью.
[22:30] <BlackVlXENN> Спасибо, ХОУ, Алекс…
[22:30] <HAWK> Вот и все на сегодня. Спасибо всем. Не стесняйтесь, чтобы посмотреть, как Алекс работает над вопросом Мурали — Привет, Алекс, у меня есть контейнерный div с двумя дочерними элементами (заголовок и тело). Контейнер имеет полосы прокрутки. Я хочу, чтобы заголовок div был зафиксирован сверху, и только тело div должно прокручиваться.
[22:30] <HAWK> Образец выше q http://cssdeck.com/labs/gomiazlb
[22:30] <alexmwalker> удовольствие всем. Благодарность
[22:30] <lori> Спасибо всем… я напишу в Твиттере, если получу это на codepen
[22:34] <alexmwalker> Значит, в вашей демоверсии заголовок исправлен? Это работает?
[22:34] <alexmwalker> А тело выглядит под заголовком по внешности?
[22:35] <Murali> но он перекрывает контейнер, я просто хочу, чтобы он помещался внутри контейнера
[22:35] <BlackVlXENN> ширина тела… это не та же ширина
[22:37] <Murali> Я ожидаю такого поведения, если я создаю позицию контейнера: относительную, но заголовок не должен прокручиваться
[22:37] <ralphm> Если контейнер всегда будет иметь эту фиксированную ширину, почему бы не указать ширину заголовка: 400 пикселей?
[22:38] <alexmwalker> http://cssdeck.com/labs/hy1bp6si
[22:38] <alexmwalker> вот что у меня здесь
[22:38] <alexmwalker> что сказал Ральфм
[22:38] <alexmwalker> (я сделал контейнер красным, чтобы я мог его видеть)
[22:39] <ralphm> Или оставьте ширину заголовка равной 100%, но укажите положение контейнера: относительный;
[22:40] <ralphm> Edit: упс, это мешает заголовку оставаться на месте, поэтому отмените это. 🙂
[22:41] <Paul> Murali — Хотите фиксированный заголовок, в то время как под ним можно прокрутить div, но заголовок остается фиксированным?
[22:42] <Murali> да, но полоса прокрутки должна быть в контейнере, а не в теле
[22:42] <Paul> Как это? http://www.pmob.co.uk/temp/fixed-header2.htm
[22:43] <Мурали> @ Пол, мне нужна полоса прокрутки для контейнера
[22:43] Заголовок <BlackVlXENN> с фиксированным значением вместо процента?
[22:43] <Paul> Если вы уменьшите высоту окна просмотра, контент получит полосу прокрутки
[22:44] <alexmwalker> Значит, заголовок затемнит верхнюю часть полосы прокрутки?
[22:45] <alexmwalker> http://cssdeck.com/labs/0hivmtvo
[22:45] <alexmwalker> как насчет этого?
[22:45] <BlackVlXENN> о, я просто перечитал то, что ищет Мурали …
[22:46] <alexmwalker> Это немного глупо и предполагает, что вы знаете ширину, но ..
[22:47] <Murali> да, это то, что я ожидал, но это не будет идеальным решением, поскольку ширина полосы прокрутки не всегда 17px во всех браузерах / платформах
[22:47] <alexmwalker> правда, это часть хака ..;)
[22:48] <Capt_Snickle_Fritz> Я люблю эти типы макетов. Я сделал подобное здесь, но с нижним колонтитулом и боковой панелью. http://www.spruzstuff.spruz.com/ Если вы хотите покопаться в css и посмотреть, как, не стесняйтесь. Вышел на концерт
[22:48] <Мурали> в любом случае лучше, что сломал, спасибо Алекс за ваше время
[22:48] <Мурали> * лучше, чем сломан
[22:49] <alexmwalker> Подумав .. Ты в твиттере Мурали? Я мог бы иметь лучший ответ, как только сижу над проблемой некоторое время
[22:49] <Murali> Спасибо Алекс и HAWK за этот замечательный сеанс
[22:50] <Мурали> @murali_rk
[22:50] <alexmwalker> Наше удовольствие, Мурали, спасибо, что пришли 🙂
[22:50] <alexmwalker> Спасибо. Я сделаю это после следующего кофе
[22:52] <HAWK> Спасибо всем
[22:52] <HAWK> Стенограмма будет позже 🙂