Разговор с экспертами этим утром вызвал у меня немного большее волнение, чем можно было ожидать, когда дело доходит до работы, но это было на то веские причины. Наши эксперты не только были давними авторами SitePoint и звездами CSS Луи Лазарис и Рэйчел Эндрю, но и ознаменовали открытие нашего нового окна с живым кодом. Новый интерфейс позволяет экспертам и другим указанным участникам совместно кодировать, чтобы демонстрировать примеры и решать проблемы.
Время пролетело незаметно, и мы затронули ряд тем: от препроцессоров до адаптивных решений. Из него вышло множество полезных ресурсов, и чтобы уберечь вас от перебора всей расшифровки стенограммы, я вытащил их и перечислил их ниже для вашего удовольствия от чтения.
Некоторые публикации SitePoint CSS от Луи и Рэйчел:
Jump Start CSS
CSS3 Антология
Все, что вы знаете о CSS, неправильно
HTML5 и CSS3 для реального мира
Некоторые полезные инструменты:
Dust Me Selectors (для очистки вашего CSS)
CSS3 Pie (делает IE 6-9 способным отображать некоторые из самых полезных функций оформления CSS3)
Современный IE (инструменты для разработки IE)
Web Tools Weekly (еженедельный бюллетень Луи)
Дебаты Sass vs LESS:
Sass vs LESS
PreProcessor Shootout
Сетки и макеты:
Изучите CSS Layout
CSS3 Grid Layout
CSS3 Сетки и Регионы
CSS Tricks: Grid
Центр нескольких делений
Адаптивные решения:
Выбор адаптивного решения для изображения
Адаптивные Концепции Меню
Адаптивные Шаблоны
Адаптивная навигация
Другие источники:
Дневные презентации CSS
Прекратите решать проблемы, которых у вас пока нет
Вы можете подписаться на уведомления по электронной почте о будущих сессиях и проверить наше предстоящее расписание здесь .
На следующей неделе будет Rails 4 с Энди Хоторном и Гленном Гудричем.
И если вы хотите точно увидеть, что произошло сегодня утром, вот полная расшифровка:
[19:27] <LouisLazaris> Задание перед чатом: у кого в браузере открыто больше вкладок: у меня около 60: D
[19:28] <HAWK> Хвастайся!
[19:28] <HAWK> У меня открыто три браузера, всего 22 вкладки. Я думал, что это было хорошо
[19:29] <LouisLazaris> хаха, да, я перебрал множество ссылок из некоторых рассылок примерно за 10 минут. назад, так что мой необычно высокий
[19:29] <Джерри> 46 — в одном из трех окон
[19:29] <HAWK> Звучит как хорошая новостная рассылка
[19:29] <HugoGiraudel> 6 здесь.
[19:30] <HAWK> Хорошо, я звоню с начала
[19:30] <HAWK> Приветствую всех — спасибо за участие в сессии
[19:30] <HAWK> Особый прием и благодарность Луи Лазарису и Рейчеландрю — давним авторам SitePoint
[19:31] <rachelandrew> Привет всем 🙂
[19:31] <HAWK> Их последнее сотрудничество — Jump Start CSS https://learnable.com/books/jscss1
[19:31] <HAWK> Для тех, кто не был на одной из этих сессий — она будет становиться все более оживленной и это действительно органичный чат
[19:31] <HAWK> Если у вас есть вопросы, прыгайте в любое время, и я поставлю их в очередь для наших экспертов
[19:32] <HAWK> Я выложу полную стенограмму сессии в SitePoint позже сегодня
[19:32] <Джерри> 211 вкладок
[19:32] <twigsta> Хорошо. Я ненавижу искусственные добавки на IRC
[19:32] <Луи Лазарис> Джерри выигрывает
[19:32] <HAWK> Святой моли Джерри — это смешно!
[19:32] <james> привет, ястреб! Привет всем. зная только традиционный CSS, что я должен узнать дальше? SASS или МЕНЬШЕ?
[19:33] <HAWK> И я с гордостью могу сказать, что эта сессия представляет собой запуск нашего нового окна с живым кодом, которое вы увидите в правой части этого чата.
[19:33] <HugoGiraudel> Красиво выглядит. 🙂
[19:33] <TaoistTotty> Я очень предпочитаю этот взгляд
[19:33] <Джерри> И полоса прокрутки чата !!!!!! Благодарность!!
[19:33] <HAWK> Так что, если у кого-то есть примеры, которые будут использовать окно кода, дайте мне знать, и я дам вам разрешение написать в него
[19:33] <LouisLazaris> @james В общем, я думаю, что Sass — это путь. Он превращается в jQuery препроцессоров (много людей говорят об этом, пишут что-то для этого и т. Д.)
[19:34] <HAWK> Рад, что вам это нравится, ребята
[19:34] <rctneil> У меня вопрос о вертикальном ритме, это нормально?
[19:34] <rctneil> есть *
[19:34] <HAWK> Да, любые вопросы в порядке
[19:34] <lj> Я задаю второй вопрос или нет … какое будущее?
[19:35] <rachelandrew> @james, тебе тоже не нужно * учиться. Однако кажется, что Sass использует больше людей и, следовательно, больше инструментов и примеров.
[19:35] <HugoGiraudel> * Кау * Сасс * Кау *
[19:35] <rctneil> Я сегодня начал изучать использование модуля Compass Vertical Rhythm, очень нравится. Идеально, как только у меня получится работать с rem’ами и резервным пикселем! Но как вы сохраняете свой вертикальный ритм, когда изображения используются клиентом через CMS?
[19:36] <TaoistTotty> Как лучше всего привести в порядок свой CSS или лучше спланировать его? — Я часто нахожу, что у меня есть ненужные классы и т. Д., Когда я проверяю код (вещи, которые можно было бы сделать лучше)
[19:36] <ConceptFusion> Я люблю SaSS (и в настоящее время работаю в команде Rails), но всегда беспокоюсь о рельсово-ориентированном аспекте… с другой стороны, обработка на стороне клиента LeSS также касается меня… еще предстоит решить, какой из них я предпочитаю
[19:36] <Murali> Есть ли инструмент для проверки специфичности?
[19:37] <rctneil> Sass потрясающий, предпочитаю его меньше, а синтаксис с отступом — мой любимый!
[19:37] <lj> почему ты предпочитаешь это меньше?
[19:37] <Jerry> Что такое вертикальный ритм?
[19:38] <rctneil> Sass также имеет преимущество наличия компаса
[19:38] <LouisLazaris> TaoistTotty Есть нечто, называемое Dust Me Selectors: https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/ (и аналогичные инструменты)
[19:38] <twigsta> типография Джерри
[19:38] <rctneil> Я не использовал Меньше! 🙂
[19:38] <lj> вертикальный ритм, поэтому два столбца будут синхронизироваться по горизонтальной оси
[19:38] <rctneil> Но в целом синтаксис Sass мне кажется более разумным
[19:38] <LouisLazaris> TaoistTotty Но будьте осторожны, потому что я считаю, что это проверяет на каждой странице, так что если что-то не используется на этой странице, это не значит, что это не используется в проекте (но это было некоторое время, так как я посмотрел на него, но это может быть обновлено сейчас)
[19:39] <james> пока что, SASS> 5, LESS = 0
[19:39] <HAWK> LouisLazaris и TaoistTotty — нет, я не верю, что мы обновили его долгое время
[19:39] <LouisLazaris> О, Dust Me — это объект SitePoint? Я не понял …
[19:39] <Zoe> Если вы дадите DustMeSelectors карту сайта XML, она просканирует все страницы.
[19:39] <HAWK> Это так 🙂
[19:40] <chineebro> Обычно я слышу, что SASS более мощный, чем LESS.
[19:40] <LouisLazaris> @Zoe приятно знать
[19:40] <twigsta> Я начал с меньшего, кривая сложности не такая крутая
[19:40] <rctneil> Кто-нибудь может помочь с моим вопросом о виртуальной реальности?
[19:40] <HugoGiraudel> Sass также имеет более надежный синтаксис. Основная проблема с LESS — они решили использовать символ @ для переменных, что противоречит директиве @ в обычном CSS. Есть много вещей, которые вы не можете (или вряд ли можете) сделать в LESS, что абсолютно тривиально в любом другом препроцессоре CSS из-за этой проблемы.
[19:40] <LouisLazaris> rctneil Это сложный вопрос, и, вероятно, это скорее проблема CMS, чем CSS.
[19:41] <ConceptFusion> Compass довольно крутой… особенно для кросс-браузерного упрощения CSS
[19:41] <SpaceBeers> Честно говоря, я не имел ничего общего с LESS. SASS Я большой поклонник хотя
[19:41] <rctneil> или даже без CMS, как ты справляешься с изображениями в отношении сохранения ритма?
[19:41] <rctneil> особенно, когда вы делаете это и делаете это дружелюбным и хидпи
[19:41] <lj> Можешь объяснить пирог?
[19:42] <TaoistTotty> Спасибо LouisLazaries, я посмотрю на это
[19:42] <LouisLazaris> rctneil CMS никогда не будет идеальным. Пока пользователи могут что-то делать, они будут находить способы что-то сломать. При этом вы можете использовать такие вещи, как max-width и max-height или даже перенос слов: break-word; чтобы не сломать вещи, но нет никаких гарантий.
[19:42] <Джерри> ЖЖ — 3.14159 или вишня?
[19:42] <LouisLazaris> @lj Что вы подразумеваете под «пирогом»?
[19:43] <rctneil> LouisLazaris Хорошо, спасибо
[19:43] <lj> Джерри тоже .. поддержка пирога, что-то связанное с clearfix
[19:43] <HugoGiraudel> http://css3pie.com/
[19:43] <lj> на самом деле я не понимаю, когда использовать clear fix. против ясно как
[19:44] <LouisLazaris> Для дебатов Sass vs. LESS эти две записи должны быть прочитаны: http://css-tricks.com/sass-vs-less/ и http://net.tutsplus.com / учебники / HTML-CSS-технологии / дерзость-против-менее против-стилусом-а-препроцессор-выбывание /
[19:44] <lj> Спасибо Хьюго Г
[19:44] <HugoGiraudel> Clearfix = родительская сторона. Очистить оба = родная сторона.
[19:44] <lj> Еще раз спасибо
[19:45] <rctneil> lj. Исправление clear используется, когда все дочерние элементы элемента перемещаются, тогда родительский элемент обычно сворачивается, поэтому вы используете clearfix, чтобы опустить родительский элемент, чтобы он содержал все перемещенные дочерние элементы, используется свойство clear заставить один плавающий предмет идти под другим, а не вдоль стороны — извините за плохое объяснение
[19:45] <lj> Но у меня есть тело, которое не растягивается до дна при просмотре инструментов G dev
[19:45] <HugoGiraudel> Мы потеряли Рэйчел? 🙁
[19:45] <thewebwiz> rctneil — Хорошее объяснение! 🙂
[19:45] <TheDutchCoder> @lj: это также может быть связано с абсолютным / фиксированным позиционированием элементов (если ваш HTML верен)
[19:45] <lj> у меня 100% рост на теле
[19:45] <twigsta> Q: SASS кажется немного проворным. Чтобы это работало, все должны быть подписаны на эту идею. Многие крупные компании имеют несколько команд, работающих над одной и той же кодовой базой. Есть ли способы смягчить путаницу?
[19:46] <rctneil> lj Этот сайт отлично объясняет все это: http://learnlayout.com/
[19:46] <lj> Я не думаю, что я указал какой-либо фиксированной или абсолютной
[19:47] <thewebwiz> @lj — Могут возникнуть проблемы — попробуйте min-height: 100%; высота: 1 пикс;
[19:47] <LouisLazaris> Я разместил пример CSS в области кода 🙂
[19:47] <rctneil> lj Если вы пытаетесь получить столбцы одинаковой высоты с фоном, тогда это сложная проблема, фоны, min и max — все методы, которые можно использовать
[19:47] <TheDutchCoder> @lj, тогда что-то должно быть плавающим вне его контейнера… Тело должно обернуть все, если правильно исправить… В качестве альтернативы вы можете захотеть использовать inline-блоки, если вы не поддерживаете IE7 и ниже. Особенно сеточные системы, которые используют встроенные блоки, превосходят плавающие imo.
[19:48] <LouisLazaris> twigsta Изучите исходные карты, которые в основном позволяют кому-то, просматривающему Sass, видеть, из какой строки CSS в исходном файле CSS
[19:48] <ConceptFusion> Часть {потенциальной} проблемы, которую я имею с SaSS, заключается в том, что если вы не работаете над проектом Rails, предпочтительно с включенным интегрированным конвейером ресурсов и компиляцией на лету, то это займет всего один член команды, работающий над скомпилированным CSS, чтобы сломать весь процесс … компиляторы, такие как CodeKit, хороши для отдельных людей, но не являются надежным рабочим процессом
[19:48] <ConceptFusion> для команд
[19:48] <lj> все выглядит хорошо в сафари и FF, но в Google Dev Tools это показывает, что мое тело достигает так далеко вниз.
[19:48] <lj> я пытаюсь изолировать … т.е.
[19:49] <lj> ПОЧЕМУ я не понимаю, как кто-то может сломать CSS, когда он может быть просто сгенерирован снова из sass
[19:50] <HugoGiraudel> Это не нарушает CSS. Это нарушает рабочий процесс.
[19:50] <HugoGiraudel> Очень разные вещи.
[19:50] <ralphm> LouisLazaris Хороший образец оды. 🙂
[19:50] <HugoGiraudel> Рабочий процесс — это слово, которого почти не существует, когда работаешь над проектом в одиночку.
[19:50] <ConceptFusion> дело не в том, что ОНИ могут сломать CSS столько, сколько они пишут в черную дыру … т.е. они вносят изменения, эти изменения затем переписываются …
[19:51] <TheDutchCoder> rachelandrew Когда вы решили, что пришло время придумать Perch, и что стало для вас самым большим уроком в процессе разработки?
[19:51] <twigsta> LouisLazaris спасибо, я сделаю!
[19:51] <james> у кого светлое будущее? SASS или МЕНЬШЕ?
[19:52] <ConceptFusion> SaSS, кажется, имеет больше тяги в настоящее время …
[19:52] * Луис Лазарис (ae599fcc @ localhost) присоединился к #sitepoint
[19:53] <HugoGiraudel> В Sass задействовано больше разработчиков, чем LESS.
[19:53] <HugoGiraudel> чем *
[19:53] <ConceptFusion> Я знаю одну вещь … Мне трудно * вернуться к написанию CSS обычным способом!
[19:53] <rachelandrew> @TheDutchCoder Меня попросили поговорить о CSS, лучше не обсуждать его — хотя всегда рады поговорить о Perch в другом месте;)
[19:54] <TheDutchCoder> О, мой плохой! : D
[19:54] <HAWK> Я немного потерял представление о том, где мы находимся. Давайте вернемся к делу. У кого-нибудь есть вопрос, на который еще нет ответа?
[19:54] <rctneil> Главное, что мне нравится, когда препроцессоры — это миксины, очень ценные
[19:54] <lj> Поняли меня тоже, и Sass было легко узнать, вы также можете вставить обычный CSS, где бы вы не были до этого, с SCSS
[19:54] <SpaceBeers> rachelandrew — Каково ваше лучшее решение для элементов одинаковой высоты?
[19:54] Тогда <TheDutchCoder> CSS вопрос: каким был ваш последний «вау» момент, когда вы изучали что-то новое в CSS?
[19:55] <rctneil> Главное, что я говорю людям, которые только начинают с веб-материалов, которые говорят, что хотят изучать Sass, — это сначала изучать простой CSS и знать, как будет выглядеть вывод.
[19:55] <LouisLazaris> Согласен
[19:55] <thewebwiz> Как я могу предотвратить перетаскивание изображения со страницы при попытке перетащить его контейнер?
[19:56] <TheDutchCoder> rctneil похож на jQuery <-> JavaScript imo 😉
[19:56] <lj> определенно нужно хорошо знать css, чтобы разобраться в sass
[19:56] <rachelandrew> Мой самый удивительный момент связан с работой над CSS Grid Layout, я думаю, что это лучшее решение для правильного метода верстки, на ранней стадии на данный момент, но стоит посмотреть в
[19:56] <LouisLazaris> thewebwiz Что вы подразумеваете под «перетаскиванием»? Это можно изменить размер?
[19:56] <ConceptFusion> очень верно
[19:56] <HugoGiraudel> rachelandrew LouisLazaris Возможно, вы видели мои статьи о Sass. Я безоговорочный хакер Sass, мне это нравится. Считаете ли вы, что некоторые возможности препроцессоров как бы пересекают грань между тем, что CSS должен уметь делать, а что нет? Где вы стоите на эту тему?
[19:56] <rctneil> TheDutchCoder Сегодня, когда я впервые изучал вертикальный ритм, это здорово, хорошая типография, а Sass и Compass неоценимы!
[19:56] <TheDutchCoder> Рэйчленд, хорошо, какую систему ты собираешься использовать? Это встроенный блок на основе и отзывчивым?
[19:57] <lj> не могли бы вы подробнее рассказать о сетке CSS?
[19:57] <SpaceBeers> равные высоты в сетках CSS являются постоянным источником боли для меня. Какое лучшее решение у каждого есть?
[19:57] <lj> Сайт компаса и документация устарели и сбивают с толку
[19:58] <LouisLazaris> HugoGiraudel Я думаю, что Sass — это то, каким должен быть CSS, и так должно было быть всегда. Это намного мощнее с возможностями программирования. Когда это просто CSS, это слишком просто и слишком противоречит основным принципам разработки программного обеспечения (DRY и т. Д.)
[19:58] <rachelandrew> @TheDutchCoder Я не слежу, я говорю о новом модуле CSS Grid Layout http://www.w3.org/TR/css3-grid-layout/, а не о любой системе сетки
[19:58] <thewebwiz> LouisLazaris — Перетаскивание галереи изображений с помощью JS — работает на DIV, но изображения перемещаются сами по себе !!
[19:59] <HugoGiraudel> TheDutchCoder В настоящее время поддерживается только в IE10 +. Chrome Canary скоро присоединится.
[19:59] <LouisLazaris> SpaceBeers Я не хочу это говорить, но лучший способ добиться одинаковой высоты, чтобы он работал в кросс-браузерном режиме, — это либо JavaScript, либо старая техника искусственных столбцов. Это просто печальная реальность, но, по крайней мере, есть выход.
[19:59] <thewebwiz> SpaceBeers — отображение: таблица-строка / столбец работает IE 8+
[19:59] <lj> как скоро будет доступен макет сетки?
[19:59] <TheDutchCoder> А, ладно, теперь я понимаю, что вы работаете над фреймворком;)
[19:59] <SpaceBeers> rachelandrew — Это выглядит очень интересно.
[19:59] <TheDutchCoder> Да, это конечно интересно для макетов
[19:59] <LouisLazaris> SpaceBeers Да, что сказал thewebwiz. Это тоже вариант
[20:00] <HAWK> Добро пожаловать в тех людей, которые только что присоединились. Не стесняйтесь задавать вопросы — я поставлю их в очередь за Рэйчел и Луи
[20:00] <LouisLazaris> thewebwiz — Опять же, я не знаю, что вы подразумеваете под «перетаскиванием»?
[20:00] <rctneil> @lj попробуйте beta.compass-style.com Более свежая информация. Интересно, когда Крис Эппштейн наконец выпустит 0.13?
[20:00] <thewebwiz> SpaceBeers — Луис прав. Но градиенты могут помочь (SVG?)
[20:00] <SpaceBeers> thewebwiz — да, мне нравится этот. Мне всегда нравился трюк с отрицательным запасом
[20:01] <rachelandrew> Макет Grid-типа существует в IE10 (но в старой реализации), однако с ним интересно поиграть
[20:01] <rctneil> rachelandrew У вас есть какие-либо идеи относительно графика выпуска Compass?
[20:01] <rachelandrew> У меня есть несколько слайдов, которые я представил вчера, которые содержат дополнительную информацию и ссылки на ресурсы https://speakerdeck.com/rachelandrew/css3-grids-and-regions
[20:01] <ConceptFusion> «В настоящее время поддерживается только в IE10 +. Chrome Canary скоро присоединится к нам ». Кто думал, что мы когда-нибудь прочтем подобное заявление! лол
[20:01] <rachelandrew> @rctneil Я не использую Sass или Compass, поэтому я не знаю
[20:01] <HugoGiraudel> У CSS-Tricks есть запись в альманахе для Grid Layout: http://css-tricks.com/almanac/properties/g/grid/
[20:01] <LouisLazaris> Честно говоря, я избегал Grid просто потому, что он такой новый и имеет небольшую поддержку браузера. Я думаю, что flexbox хорош для изучения, но, опять же, не так практично из-за кросс-браузерных проблем.
[20:01] <lj> rachelandrews Спасибо !! И рктнейл
[20:02] <rctneil> rachelandrew Fair Достаточно, спасибо!
[20:02] <rachelandrew> В IE10 есть несколько замечательных вещей — также есть поддержка некоторых регионов и исключений, они делают хорошие вещи 🙂
[20:02] <HugoGiraudel> И IE11 действительно близок к жизни.
[20:03] <lj> Я пытаюсь использовать Singularitygs в режиме изоляции по умолчанию, но мой css выходит с плавающей точкой.
[20:03] <LouisLazaris> Для тех, кто еще этого не видел, видео с недавнего дня CSS доступны онлайн: http://vimeo.com/channels/cssday
[20:03] <ConceptFusion> Из-за этого IE 6, 7, 8 и 9 чудесным образом исчезают? 😉
[20:03] <HugoGiraudel> Определенно нет.
[20:03] <HugoGiraudel> Но мы подходим к этому.
[20:04] <LouisLazaris> Кто-нибудь знает, собирается ли IE10 автоматически обновляться до IE11?
[20:04] <lj> Можно ли за ними наблюдать, если ты не сделал саммит?
[20:04] <LouisLazaris> @lj да, конечно!
[20:04] <lj> Это здорово, я так заинтересовался этим.
[20:04] <rachelandrew> есть виртуальные машины IE11, теперь доступные на http://www.modern.ie
[20:04] <HugoGiraudel> Луи Лазарис Насколько я знаю, нет.
[20:04] <HugoGiraudel> LouisLazaris По крайней мере на рабочем столе.
[20:05] <HugoGiraudel> LouisLazaris Но я могу ошибаться.
[20:05] <ConceptFusion> Пользователи XP (которых в корпоративной стране еще много) ограничены IE9 и ниже
[20:05] <LouisLazaris> HugoGiraudel Это действительно жалко, если это правда.
[20:05] <HugoGiraudel> Хорошая новость в том, что нам придется искать новые хаки! : D
[20:05] <TheDutchCoder> Я думаю, что жизненный цикл браузеров MS связан с их поддерживаемой ОС
[20:06] <thewebwiz> LouisLazaris — перетаскивая, я имею в виду переход на любую страницу с изображением в FF или Chrome и использование мыши для перетаскивания изображения. Он скопирует на любое место, куда вы его бросите. Как это остановить?
[20:06] <lj> Есть ли другой способ протестировать CSS-кросс-браузер, кроме стека браузеров, для тестирования локального файла?
[20:06] <james> lj http://www.modern.ie
[20:06] <rachelandrew> @lj используют виртуальные машины
[20:06] <HugoGiraudel> Насколько я знаю, нет ничего лучше, чем Browserstack.
[20:06] <thewebwiz> ConceptFusion — думаю, вы имеете в виду IE 8!
[20:07] <ConceptFusion> Браузерные виртуальные машины — это действительно единственный надежный способ тестирования, локально или удаленно…
[20:07] <LouisLazaris> thewebwiz Уммм, нет никакого способа остановить это. Но это не будет действительно копировать в любое место. Я не вижу, чтобы это происходило так, как вы описываете …?
[20:07] <lj> сложно смотреть на локальные файлы в Browserstack
[20:07] <ConceptFusion> Мой плохой … и НАСТОЛЬКО намного хуже! лол (SVG кошмары)
[20:08] <LouisLazaris> thewebwiz — Единственный способ, который может случиться, — это если вы перетащите его в <iframe>, но я даже не уверен в этом
[20:08] <thewebwiz> LouisLazaris — у меня на рабочем столе много нежелательных изображений! 🙂
[20:08] <ralphm> Недавно я читал, что IE будет автоматически обновляться. Не уверен, как это работает, хотя.
[20:08] <HugoGiraudel> rachelandrew Не удается найти виртуальную машину IE11 на modern.io. 🙁
[20:09] <LouisLazaris> thewebwiz — О, ты имеешь в виду перетаскивание на свой компьютер… О, да, ты не можешь это остановить, это вариант пользователя в их ОС / браузере. Я думал, что вы имели в виду, перетащите в другую часть страницы.
[20:09] <LouisLazaris> thewebwiz Почему вы хотите это остановить?
[20:09] <HugoGiraudel> нашёл rachelandrew! 🙂
[20:09] <rachelandrew> Это определенно для Mac и VirtyualBox, по крайней мере, вам нужно выбрать тестовую среду и платформу виртуализации, чтобы увидеть
[20:09] <thewebwiz> LouisLazaris — потому что я делаю галерею перетаскиваемых изображений. 🙂
[20:10] <LouisLazaris> @thewebiz Но это не должно влиять на функциональность вашей галереи изображений. Ваш сценарий должен переопределить это, AFAIK
[20:11] <LouisLazaris> thewebwiz Если они не перетаскивают в свою файловую систему (например, на рабочий стол), которая затем будет находиться за пределами браузера, поэтому у вас нет контроля над AFAIK (но, эй, я могу ошибаться; некоторые дальнейшие исследования помогут)
[20:11] <HAWK> Добро пожаловать к тем из вас, кто только что присоединился. Если у вас есть вопросы, прыгайте в любое время — не ждите паузы.
[20:11] <HAWK> Я выложу полную стенограмму в SitePoint сегодня вечером
[20:11] <thewebwiz> Луи Лазарис Хмм. Не знаю как. (Использование нативного JS для адаптивного сайта.)
[20:12] <LouisLazaris> thewebwiz Используете ли вы плагин перетаскивания? Вы должны использовать функциональность перетаскивания, а не полагаться только на способность пользователя перетаскивать файлы.
[20:14] <Paul> @thewebwiz: используйте img {pointer-events: none}, чтобы отключить перетаскивание изображения (в браузерах, которые поддерживают события указателя)
[20:15] <thewebwiz> LouisLazaris — не перетаскивай — перетаскивай на следующий слайд. Используя JS, но хотите остановить перемещение изображения в браузере. Найдено свойство CSS для Webkit, но не для FF. Кто-нибудь?
[20:15] <artfulnessnl> Здравствуйте, я сейчас начинаю создавать адаптивный сайт. с большим фоновым изображением. который будет иметь ширину не менее 1024 пикселей на рабочем столе, но на мобильном устройстве около 320 пикселей: но тогда вам нужно много времени для загрузки небольшого устройства? или как это работает?
[20:15] <artfulnessnl> вроде, я, вероятно, использую функцию -cover-, чтобы обрезать ее
[20:15] <lj> это отличный wizbiz, если он работает … чтобы людям было труднее получать изображения, защищенные авторским правом
[20:16] <lj> веб-бизнес
[20:16] <LouisLazaris> thewebwiz Я думаю, что я все еще смущен тем, что вы говорите. Свяжитесь со мной на моем веб-сайте, используя контактную форму (в нижнем колонтитуле есть ссылка), и, возможно, у меня будет больше времени, чтобы объяснить, как только я пойму, какую проблему вы пытаетесь решить (www.impressivewebs.com)
[20:16] <TheDutchCoder> LouisLazaris rachelandrew Что вы думаете о таких фреймворках, как бутстрап? Как вы думаете, это помогает создавать хороший CSS или мешает ему?
[20:16] <thewebwiz> Луи Лазарис, хорошо. Благодарю.
[20:16] <rachelandrew> @artfulnessnl, в этой статье есть несколько хороших советов относительно адаптивных изображений http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
[20:17] <ralphm> @ HAWK — мы можем опубликовать код Пола в редакторе кода?
[20:17] <artfulnessnl> tnx! и у меня тот же вопрос, что и у TheDutchCoder, я не знаю, так ли это, потому что я тоже голландец, хаха 🙂
[20:17] <TheDutchCoder> хе-хе;)
[20:17] <HAWK> Ральфм. Хорошая идея — я могу дать Павлу разрешение сделать это
[20:17] <HugoGiraudel> Пол Хорошие новости, Internet Explorer 11 станет первой версией IE, поддерживающей события указателя.
[20:18] <lj> Я имею в виду Пола .. выглядит как очень простое решение. Я видел, как люди ставят прозрачные изображения поверх настоящих для этой цели
[20:18] <artfulnessnl> (очевидно, мы очень скептически настроены)
[20:18] <rachelandrew> @TheDutchCoder Я не фанат, отлично подходит для создания прототипов, но эти вещи оставляют вас с невероятно раздутым CSS.
[20:19] <LouisLazaris> TheDutchCoder Относительно фреймворков, таких как Bootstrap: одна из вещей, которые эти фреймворки сделали, что мне нравится, — это помощь в продвижении модульных или OOCSS, что хорошо. Я нахожу, что иногда люди добавляют эти фреймворки на свои сайты просто для того, чтобы использовать одну или две мелкие вещи, что является чушью, но в целом я думаю, что они хороши для быстрого решения проблем. я
[20:19] <LouisLazaris> верю, что Рэйчел написала хорошую статью о решении проблем, которых у нас нет, может быть, она сможет связать это.
[20:19] <HAWK> Пол — у вас есть разрешение на использование редактора кода, если вы хотите опубликовать код, на который ссылается Ральф
[20:19] <Paul> @HugoGiraudel Да, это будет полезно, так как Pointer-events уже поддерживается в Firefox и Chrome на данный момент.
[20:20] <HugoGiraudel> Пол и опера. И сафари. И Android.
[20:20] <rachelandrew> этот — больше о таких вещах, как HTML5 Boilerplate, но да 🙂 http://www.rachelandrew.co.uk/archives/2012/03/21/stop-solving-problems-you -dont-еще-есть /
[20:20] <thewebwiz> TheDutchCoder — я люблю фреймворки. Я учился больше всего и многому научился у каждого из них. Делая свой собственный… 🙂
[20:20] <TheDutchCoder> Я спрашиваю, так как в настоящее время мне приходится работать с клиентом с помощью начальной загрузки, и я считаю, что он мешает моему OOCSS больше, чем помогает… Может быть, это также потому, что многое из этого диктует элементы дизайна.
[20:20] <LouisLazaris> TheDutchCoder — тот факт, что эти фреймворки имеют отдельные модули, которые сильно зависят от классов (и не используют идентификаторы), должен ясно указывать на то, что модульная система — это путь.
[20:21] <TheDutchCoder> thewebwiz, да, они отлично подходят для обучения, но я создал свой собственный, который не имеет реального стиля (это скорее структура макета, чем все остальное). Возвращение кажется очень громоздким
[20:21] <HAWK> Пол Вы можете сохранить этот код в Gist, который поместит его в стенограмму (используйте cog настроек)
[20:22] <thewebwiz> Кто опубликовал этот код img? Большое спасибо. Это выглядит как победитель.
[20:22] <HAWK> Эта сессия летит. У нас осталось около 10 минут. Если у вас есть какие-либо не заданные вопросы, сейчас самое время перейти к
[20:22] <Paul> Сохраненный редактор: https://gist.github.com/6083386
[20:22] <HAWK> thewebwiz Я считаю, что это был Пол 🙂
[20:22] <LouisLazaris> TheDutchCoder согласился. У меня был друг-новичок, который попросил меня помочь с проблемой Bootstrap, и я, честно говоря, не смог ее исправить, не удалив Bootstrap. Это противоречило вещам, и было очень трудно понять, что было не так, не удаляя все это и начав с нуля. Я думаю, что природа CSS иногда облегчает создание вещей
[20:22] <LouisLazaris> с нуля, чем изучать тонкости фреймворка.
[20:22] <mitch> Есть ли у вас какие-либо рекомендации для изучения упражнений, например: вот изображение для страницы, теперь создайте для нее CSS. (этот тип подхода хорошо работал для меня в прошлом)
[20:23] <TheDutchCoder> LouisLazaris да, конечно, модульность очень хорошая, мне не нравится ее эстетическая часть. Простой пример: Bootstrap удаляет фоновые изображения при активных состояниях кнопок. Подобные вещи заставляют меня чувствовать, что это скорее «я дизайнер и не хочу изучать код». 😉
[20:23] <thewebwiz> Спасибо, Пол.
[20:24] <artfulnessnl> есть хороший источник для адаптивной навигации?
[20:24] <Paul> thewebwiz, ты welocme 🙂
[20:24] <HugoGiraudel> http://css-tricks.com/responsive-menu-concepts/
[20:24] <HugoGiraudel> Тим Пьетруски из CSS-Tricks.
[20:24] <artfulnessnl> и для мобильных устройств: кнопка / ссылка, которая ссылается на номер телефона?
[20:24] <LouisLazaris> Для тех, кто заинтересован в передозировке фреймворков и других интерфейсных инструментов, я недавно выпустил новую рассылку: http://webtoolsweekly.com/
[20:25] <artfulnessnl> как ты это делаешь
[20:25] <artfulnessnl> 🙂
[20:25] <artfulnessnl> tnx!
[20:25] <HugoGiraudel> Используйте номер телефона в качестве ссылки. <a href= договор0123456789 «> Позвони мне, может быть </a>.
[20:25] <HugoGiraudel> HAWK Вы можете добавить это в редактор кода. 🙂
[20:25] <rachelandrew> @artfulnessnl http://bradfrost.github.io/this-is-responsive/patterns.html отличный набор шаблонов дизайна, включая навигацию
[20:25] <artfulnessnl> ooooow, к счастью, некоторые вещи также просто!
[20:25] <thewebwiz> Другие шаблоны здесь: http://bradfrost.github.io/this-is-responsive/patterns.html#navigation
[20:25] <HugoGiraudel> paulirish Эй, Пол, рад видеть тебя здесь! 🙂
[20:26] <HAWK> HugoGiraudel — Вы можете сделать это 🙂
[20:26] <ralphm> Еще одна отзывчивая навигационная ссылка (также Брэд Фрост): http://bradfrostweb.com/blog/web/responsive-nav-patterns/
[20:26] <LouisLazaris> у Пулириша есть 4 минуты, чтобы поставить нас в тупик 🙂
[20:26] <paulirish> 🙂 Привет всем из России!
[20:26] <HAWK> HugoGiraudel НЕ забудьте сохранить в Gist
[20:26] <paulirish> «tel:» требуется?
[20:27] <paulirish> <3z
[20:27] <HugoGiraudel> Да, забыл об этом. :П
[20:27] <artfulnessnl> Я собираюсь украсть: назови меня, может быть, концепция наверняка
[20:27] <HugoGiraudel> Сохраненный редактор: https://gist.github.com/6083436
[20:27] <paulirish> Луис, вопросов нет. просто зашёл смотреть и учиться
[20:27] <HAWK> 5 минутный звонок, друзья мои
[20:28] <TaoistTotty> Работает ли звонок для тех, кто использует Skype на рабочем столе?
[20:28] <LouisLazaris> хулиган, круто
[20:28] <artfulnessnl> TaoistTotty, это было бы здорово, ха!
[20:28] <LouisLazaris> Должен быть <a href=abilitiessnailmail:55 Какой бы ни был диск> Мой адрес </a> !! 🙂
[20:29] <thewebwiz> Q. тел: ссылка — как сделать международный номер телефона. Включить + и код страны?
[20:29] <artfulnessnl> У меня всегда есть проблемы с центрированием. как навигация, у которой есть поплавок слева
[20:30] <artfulnessnl> есть хитрость?
[20:30] <HugoGiraudel> Я думаю, все, что вы положите после `tel:` (если это число), будет проанализировано. Так что <a href=’tel:+33123456789′> Call </a> должен работать. Я могу ошибаться, правда, не уверен в этом.
[20:30] <LouisLazaris> Не уверен, поможет ли это: http://demosthenes.info/blog/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-&-Microdata
[20:30] <TheDutchCoder> artfulnessnl, если вы используете inline-блоки, тогда вы можете установить для родителя значение text-align: center
[20:30] <paulirish> Даос, он работает, если Skype установил это противное расширение для браузера, которое захватывает все ваши телефонные номера. иначе нет. в основном мобильная вещь
[20:30] <thewebwiz> artfulnessnl попробуй встроенный блок
[20:30] <TheDutchCoder> Просто убедитесь, что между элементами нет пробелов (используйте HTML-комментарии, чтобы удалить их, если вы хотите, чтобы ваш код не превратился в одну длинную строку)
[20:31] <ralphm> @artfulnessnl В этом случае есть лучшие варианты, чем float, например display: inline-block и display: table…
[20:31] <lj> Есть ли у них проблемы с использованием встроенного блока?
[20:31] <LouisLazaris> artfulnessnl Я писал об этом здесь: http://www.impressivewebs.com/center-multiple-divs/, который также работает с элементами списка
[20:31] <HAWK> Итак, это наш час, люди. Спасибо за участие.
[20:31] <TaoistTotty> paulirish Спасибо, и я согласен, что это противно
[20:31] <HAWK> Огромное спасибо Луи и Рэйчел за их время.
[20:31] <HugoGiraudel> Борьба с пробелами между встроенными блоками.
[20:31] <HAWK> Приглашаем всех поболтать и поболтать сколько угодно, но я отзову наших экспертов, когда они будут готовы
[20:32] <paulirish> ** аплодисменты Луи и Рейчел! ** [20:32] <LouisLazaris> Спасибо всем, я останусь немного
[20:32] <thewebwiz> Слушай аплодисменты
[20:32] <Джерри> Спасибо всем!
[20:32] <rachelandrew> спасибо — приятно поболтать со всеми вами 🙂 уже поздно, поэтому я скоро исчезну
[20:32] <HAWK> Последняя книга Луи и Рэйчел https://learnable.com/books/jscss1
[20:32] <TheDutchCoder> Нет, если вы разрабатываете для IE8 +
[20:32] <TaoistTotty> То же самое здесь, под аплодисменты
[20:33] <Graeme> спасибо, теперь у меня открыта сотня вкладок со всеми предложенными хорошими ссылками
[20:33] <lj> как насчет рендеринга шрифтов в Chrome… и спасибо Рэйчел, Луи и всем остальным
[20:34] <LouisLazaris> Вот общий вопрос для всех: вы используете официальные спецификации для исследований? Или вы обычно просто используете MDN или другие подобные ссылки?
[20:34] <lj> Мне понравилась книга. Не могу отложить это. прочитайте это от корки до корки
[20:35] <TheDutchCoder> Луи Лазарис оба тб. Я нахожу, что официальные спецификации время от времени немного перегружены, а MDN слишком ограничен в их сценариях использования, так что немного и того и другого!
[20:35] <HugoGiraudel> MDN большую часть времени. Официальные спецификации, когда я хочу в чем-то углубиться.
[20:35] <HenriHelvetica> @LL, что когда-либо встречается в поисках! 😉 но мне нравится МДН
[20:35] <paulirish> lj .. в последнее время много работы над рендерингом текста Chrome на окнах. в основном это означает перенос бэкэнда рендеринга текста из GDI в DirectWrite. это большое усилие, но мы движемся быстро на нем в настоящее время
[20:35] <artfulnessnl> прочитайте книгу. Но я всегда испытываю трудности, когда я применяю это на практике. все кажется таким простым, когда ты читаешь
[20:35] <TaoistTotty> LouisLazaris Обычно другие ссылки, поскольку я склонен полагать, что я не пойму официальные спецификации.
[20:35] <artfulnessnl>, а потом ты тратишь 3 часа на один div, который не идет туда, куда ты хочешь: D
[20:36] <paulirish> lj: https://code.google.com/p/chromium/issues/detail?id=137692#c104 имеет последнее обновление
[20:36] <lj> Спасибо за обновление PaulIrish … Я подумал, что это может быть я. Есть ли обходной путь?
[20:36] <LouisLazaris> Я согласен с тем, что сказал HugoGiraudel, я использую оба, но лично я думаю, что в спецификации слишком много вещей, которые не имеют значения, и я думаю, что это можно урезать. В нем также слишком много жаргона и тому подобного, чего обычные люди просто не понимают.
[20:36] <paulirish> Обходной путь, который использует большинство людей, — это использование шрифта svg вместо woff для Chroem
[20:37] <paulirish> * Хром. это в основном работает довольно хорошо.
[20:37] <HugoGiraudel> Серьезно, официальные спецификации не для ежедневного чтения. Это слишком сложно (кстати, это совершенно нормально).
[20:37] <HenriHelvetica> хорошо … вот что я борюсь с: когда лучше всего использовать свойство CLEAR ??
[20:37] <TheDutchCoder> LouisLazaris Я думаю, что спецификация * должна * быть очень подробной, только для этих крайних случаев, но да, более удобочитаемая версия была бы хороша для разработчиков и новичков
[20:37] <lj> В книге я нашел несколько советов, которые сразу же помогут мне с моими проектами.
[20:37] <TheDutchCoder> -m
[20:37] <LouisLazaris> Я думаю, что кто-то может легко создать забавный сайт цитат под названием QuotesFromW3C.com 🙂 с множеством смехотворно трудных для понимания примеров.
[20:37] <HugoGiraudel> Я бы сказал, когда у вас всплывают элементы A и B, а C — прямой брат B. Тогда вы можете очистить с помощью C.
[20:38] <chineebro>, между прочим, любой прогресс в области адаптивных изображений. Ни одно из решений не кажется идеальным — холст, несколько размеров изображений с помощью медиа-запросов и т. Д.
[20:38] <LouisLazaris> Я думаю, что http://webplatform.org/ должен быть неким средним уровнем в этой области.
[20:38] <lj> Так что я могу указать svg для Chrome, скажем, с Modernizr? Конечно, у меня есть все форматы
[20:38] <LouisLazaris> Но я чувствую, что в игре слишком поздно, чтобы оказать существенное влияние.
[20:39] <ralphm> У меня большие надежды на WebPlatform. С нетерпением жду его роста.
[20:39] <HenriHelvetica> HugoGiraudel хммм … Я хотел бы, чтобы был пример, который я мог видеть. Я зеленый @ это
[20:39] <paulirish> webplatform.org все еще работает. просто молчали на аутрич-фронте, но содержание идет очень хорошо
[20:39] <LouisLazaris> chineebro Я думаю, что это всегда будет проблемой, пока мы не получим одно кросс-браузерное решение, которое решит все проблемы.
[20:40] <HenriHelvetica> это не придумывалось много раз, но когда это происходит в классе, я только почесал голову.
[20:40] <HenriHelvetica> и, может быть, все, я не видел это достаточно много раз. но, думал, я бы спросил.
[20:40] <paulirish> lj: я бы понюхал chrome в windows и установил класс … используйте это, чтобы использовать определение diff @ff, у которого svg впереди … вы все еще хотите использовать woff впереди для всех остальных imho
[20:41] <HugoGiraudel> HenriHelvetica https://jsfiddle.net/e26Xs/
[20:41] <LouisLazaris> chineebro Мои знания о респ. изображения вещь довольно ограничена в настоящее время. В основном я просто читаю мысли других людей и жду появления чего-то хорошего, поэтому я не могу много сказать в этой области. 🙂
[20:41] <HugoGiraudel> HenriHelvetica Попробуйте удалить clear: оба из C.
[20:41] <ralphm> @Henri, когда неплавающий элемент следует за всплывающими элементами, он будет стремиться скользить вверх рядом с всплывающими элементами, что вам часто не нужно. Таким образом, установка этого значения останавливает это.
[20:42] <TheDutchCoder> Для большинства изображений я просто масштабирую их в браузере, так как большинство устройств, которым нужны адаптивные макеты, обычно хорошо их визуализируют, но это далеко от идеала (например, оно все же загружает полное изображение, конечно)
[20:42] <lj> Спасибо Полу Ирландскому … этот разговор сделал мой день. Должен идти. До свидания. Смотри fwd, чтобы увидеть стенограмму с множеством ресурсов и ссылок
[20:42] <HAWK> Хорошо, ребята, мне пора идти — я еще не завтракала.
[20:43] <HAWK> Не стесняйтесь торчать сколько угодно, но учтите, что сессия больше не будет модерироваться.
[20:43] <Paul> HenriHelvetica Это очень старая статья, но она должна помочь: http://www.search-this.com/2007/09/05/lets-be-clear-about-this/
[20:44] <chineebro> Интересно, будет ли это такой же серьезной проблемой через несколько лет, когда увеличатся пропускная способность и скорость передачи данных?
[20:44] <LouisLazaris> chineebro Это было бы идеально, если бы какой — то прорыв технологии передачи данных сделало бы , что весь вопрос спорный … но я сомневаюсь , что это произойдет в ближайшее время.
[20:45] <paulirish> я вышел. позже Луи, Хьюго. <3z
[20:45] <TheDutchCoder> chineebro согласился … И также не забывайте, что для действительно отзывчивых изображений вам нужно создать несколько версий одного и того же изображения, иногда также обрезанных по-разному … Возможно, когда-нибудь это будет намного проще сделать в CSS изначально ,
[20:45] <LouisLazaris> Хорошо, спасибо, Пол
[20:45] <HugoGiraudel> Увидимся, Пол! Спасибо, что прошли мимо. 🙂
[20:46] <chineebro> Да, я считаю, что лучшее решение — иметь новый тип файлов, который хорошо сжимается. Но это будет означать введение совершенно нового стандарта… 🙂
[20:46] <HenriHelvetica> Спасибо за ссылки.
[20:47] <LouisLazaris> После того, как это закончится, если у кого-то возникнут вопросы, я буду рад их услышать, если вы обратитесь ко мне напрямую: http://www.impressivewebs.com/contact/
[20:48] <LouisLazaris> И снова, помимо книги ( https://learnable.com/books/jscss1/online/ch01.html), вы также можете проверить мой новый проект, новый еженедельный бюллетень для фронта Конечные разработчики: http://webtoolsweekly.com/ </ shameless pluggs> 🙂
[20:48] <andychups> Извините, я новичок здесь. Луи, можешь ли ты объяснить мне про FnExpr и FnDecl?
[20:49] <ralphm> Спасибо, Луи. Я подписываюсь 🙂
[20:49] <LouisLazaris> andychups Я не знаю, что это такое. откуда вы берете эти слова?
[20:50] <TheDutchCoder> Я думаю, что это разговор по Java, нет? 😉
[20:52] <Джон> Ребята, вы знаете БЭМ?
[20:52] <TheDutchCoder> джон да, я использую его для наших проектов
[20:53] <LouisLazaris> Джон Я знаю об этом, и я думаю, что это очень хорошая методология для больших команд, работающих над большими проектами. Но я не использовал это.
[20:53] <HugoGiraudel> Конечно.
[20:55] <LouisLazaris> я думаю, что andychups баловался с нами
[20:55] <LouisLazaris> Во всяком случае, я должен всех отойти, спасибо.