<divelopers>
رفتن به کانال در Telegram
Рандомные мысли про HTML, CSS, доступность, интерфейсы, браузеры и веб-стандарты. Автор: @alexnozer 𝕏 (Twitter): https://x.com/alexnozer_dev
نمایش بیشتر436
مشترکین
اطلاعاتی وجود ندارد24 ساعت
+27 روز
+2130 روز
آرشیو پست ها
\n\nПомимо JSON, можно встраивать любые другие текстовые данные: YAML, TOML, XML, HTML, SVG, CSV, Markdown, AsciiDoc, LaTeX, обычный текст и т.д. Но нужно быть осторожным с XML-подобными форматами, потому что некоторые сочетания символов внутри удобно, потому что он по умолчанию не отображается, а семантика подразумевает хранение произвольных текстовых данных.\n\n#ydkhtml","datePublished":"2024-10-25T15:06:43Z","dateModified":"2024-10-25T15:06:43Z","author":{"@type":"Organization","name":"","url":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev","image":"https://img.tlmtr.io/c/2eOsWq/5469811301984360115?ty=x"},"publisher":{"@type":"Organization","name":"","url":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev","image":"https://img.tlmtr.io/c/2eOsWq/5469811301984360115?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":331},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev/posts/157","url":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev/posts/157","mainEntityOfPage":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev/posts/157","headline":"Результаты State of CSS 2024 21 августа я призывал пройти опрос State of CSS. А сегодня, 21 октября, я уже пу…","articleBody":"Результаты State of CSS 2024\n\n21 августа я призывал пройти опрос State of CSS. А сегодня, 21 октября, я уже публикую пост с обзором результатов. В этом году как-то быстро они. \n\nВсего в опросе прияло участие 9704 человека из разных точек мира. То есть выборка достаточно большая и показывает закономерности. В то же время важно учитывать, что вопросы можно было пропускать. Поэтому количество ответивших на вопрос почти всегда меньше общего числа участников.\n\nСреди 6025 ответивших у 17% есть когнитивные нарушения, у 6% нарушения зрения, у 3% нарушения слуха, у 3% нарушения мобильности, у 2% прочие нарушения. Это очередной раз показывает, что доступность крайне важна, а пользователей с теми или иными нарушениями не так уж и мало.\n\nК фичам. Людям очень нравится селектор :has(). Несмотря на поддержку, его использовало 72.9% опрошенных. Другую свежую фичу — Container Queries, использовало всего 31.3%. Люди экспериментируют с новыми возможностями, которые ещё не доступны во всех браузерах: Anchor Positioning — 4.8%, @scope — 4.8%, Style Queries — 5.4%, Scroll-driven Animations — 6.3% + 2.33%. Применение новых возможностей CSS растёт.\n\nТоп-10 фич, которые участники сохраняли в список для чтения, для меня это повод рассказать о них позже:\n\n1. hanging-punctuation\n2. offset-path\n3. @scope\n4. Anchor Positioning\n5. view-timeline\n6. scroll-timeline\n7. Discrete Properties Animations\n8. image()\n9. nth-child of S\n10. light-dark()\n\nСреди CSS-библиотек лидирует Tailwind CSS. На втором месте старичок Bootstrap. Замыкает тройку Ant Design. В списке также много специфичных для фреймворков библиотек компонентов.\n\nВ мире CSS-in-JS в лидерах CSS Modules. Styled Components всё ещё держатся. Затем идёт Emotion.\n\nСреди пре- и пост-процессоров первое место занимает Sass/SCSS. На втором месте PostCSS. Less на третьем месте. Интересно, что Stylus всё ещё используется.\n\nВ утилиты напихали всего подряд. Но в топе стандартные инструменты, которые есть на большинстве проектов: Prettier, Autoprefixer и Stylelint. В списке также есть минификаторы cssnano и PurgeCSS. Для себя я открыл Project Wallace, никогда до этого о нём не слышал, выглядит круто на первый взгляд.\n\nПо браузерам всё стандартно, люди в основном работают в Chrome, Firefox и Safari. Довольно сильно взлетел Arc, обогнав Brave и Vivaldi, приблизившись к Edge. В списке есть специализированный браузер для разработчиков и тестировщиков — Polypane. Ну и посочувствуем тем 64 бедолагам, которым приходится работать с IE11.\n\nРад видеть, что разработчики всё больше тестируют сайты при помощи клавиатуры, специальных плагинов (Axe, Lighthouse) и скринридеров.\n\nСравнивая баланс между написанием CSS и JS, бросается в глаза большой процент людей, которые в основном пишут JS и немного CSS. Это объясняется тем, что многие разрабатывают веб-приложения и работают с экосистемой JavaScript-фреймворков. Если говорить о медиане, то она находится на отметке 50%-50%.\n\nИнтересно посмотреть, чего разработчикам не хватает в CSS, топ-5 выглядит так:\n\n1. Mixins\n2. Conditional Logic\n3. Masonry Layout\n4. Parent Selector\n5. CSS Nesting\n\nСамая большая боль разработчиков при работе с CSS — браузерная поддержка. Затем, внезапно, Tailwind. На третьем месте чрезмерная сложность. Стоит отметить, что на вопрос ответило всего 1090 участников. Это может говорить о том, что в целом остальных всё устраивает.\n\nУдовлетворение развитием веб-технологий в целом осталось неизменным с 2021 года, а вот удовлетворение развитием CSS увеличилось в этом году.\n\nРад видеть “Веб-стандарты” на втором месте в списке подкастов. Хорошее достижение для русскоязычного подкаста в, по большей части, англоязычном опросе.\n\nКороль CSS, Кевин Пауэлл, лидирует в списке авторов видеоконтента и появляется в других вопросах, связанных с источниками информации, образованием, подкастами и значимыми людьми.","datePublished":"2024-10-21T14:01:45Z","dateModified":"2024-10-21T14:01:45Z","author":{"@type":"Organization","name":"","url":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev","image":"https://img.tlmtr.io/c/2eOsWq/5469811301984360115?ty=x"},"publisher":{"@type":"Organization","name":"","url":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev","image":"https://img.tlmtr.io/c/2eOsWq/5469811301984360115?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":313},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev/posts/156","url":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev/posts/156","mainEntityOfPage":"https://telemetr.io/fa/channels/2051162022-alexnozer_dev/posts/156","headline":"Как должен работать ? Стилизуемый