9elements
9elements
  • 45
  • 67 789
Adam Argyle & representatives of the CSS-Next Community Group – The Future of CSS
No matter where you look, from LinkedIn profiles to job descriptions or the latest articles about CSS, the term CSS3 pops up everywhere. But what does CSS3 really mean nowadays? The term itself is more than 10 years old, but is still commonly used to describe the latest features and a modern way to write CSS.
The CSS-Next Community Group aims to solve this problem, by introducing "eras" as a new system in addition to the module levels of the specifications.
In this talk, the CSS-Next community group will present what they've been working on for over a year, and provide solutions for how to get new developers up to speed on CSS, and how to keep developers educated by providing better structured and smaller chunks of new features, the so called "eras", to look at.
-------------------------------------
If you love CSS, have a look at the CSS Café - Online Meetup:
www.meetup.com/de-DE/CSS-Cafe​
CSS__Cafe​
// For more CSS tricks and tips visit our blog.
Layout with CSS: 9elements.com/blog/the-devils-albatros-an-algorithmic-layout-technique/
Gradient angels in CSS: 9elements.com/blog/gradient-angles-in-css/
CSS border radius: 9elements.com/blog/css-border-radius/
+++ About Adam Argyle +++
Adam argyleink is a bright, passionate, punk engineer with an adoration for the web. He prefers using his skills for best in class UI/UX and empowering those around him. While currently a developer advocate at Google on Chrome, he’s worked at small app agencies, medium design agencies, startups, and consulting companies. At those companies his roles spanned product lead, front end architect, ui/ux engineer, ux designer, service designer and platform lead. These roles lead to developing over 50+ web apps across nearly every imaginable stack and screen size. His perspective on web dev is extracted from these experiences.
-------------------------------------
// Follow 9elements for more digital content.
Instagram: 9elements​
Twitter: 9elements​
Blog: 9elements.com/blog​
LinkedIn: www.linkedin.com/company/9elements-agency
มุมมอง: 158

วีดีโอ

Peter Kröner - Style-Sharing with Web Components and Shadow DOM
มุมมอง 2376 หลายเดือนก่อน
Shadow DOM in Web Components is both a blessing and a curse, providing radical style encapsulation that is as beneficial as it can be obstructive. What Web Components truly need are style-sharing capabilities between individual components and the surrounding website. Fortunately, this meetup addresses exactly that! The talk will focus on various techniques for sharing CSS between components, wh...
Bramus van Damme - If View Transitions and Scroll-Driven Animations had a baby…
มุมมอง 9857 หลายเดือนก่อน
With View Transitions, you can create immersive native-like experiences that have smooth and seamless transitions between pages in your SPA. With Scroll-Transitions you can drive animations by the act of scrolling. What if you combined both? How does it work? And what about MPA? Could that ever work? If you love CSS, have a look at the CSS Café - Online Meetup: www.meetup.com/de-DE/CSS-Cafe​ tw...
Trys Mudford - Fluid responsive design - the Utopian future
มุมมอง 1.5K9 หลายเดือนก่อน
Despite creeping past the decade-mark since the dawn of responsive design, we still design far too many screens and ship sub-standard responsive experiences to users. Utopia looks to stop this with a philosophically different approach to the design foundations of type and space. Together, we’ll walk through how to take your first steps in this brave new fluid world. If you love CSS, have a look...
Gareth Heyes - Blind CSS Exfiltration: Stealing user data from unknown web pages via CSS
มุมมอง 2.8K10 หลายเดือนก่อน
This talk delves into a new hacking attack class of Blind CSS Exfiltration! A method to extract data using pure CSS from unknown web pages even when executing scripts is not an option due to strict Content Security Policy (CSP) or sanitization mechanisms like DOMPurify. I'll begin by discussing the landscape of current CSS exfiltration techniques and their limitations. The talk then introduces ...
Roma Komarov - A Peek Into the CSS Lab
มุมมอง 229ปีที่แล้ว
What happens when different CSS properties collide? There are multiple ways to find out! But the best way is to experiment and see what happens. In this talk, Roma will walk you through some of his published and some not yet seen experiments with CSS, and describe the thought process behind them. If you love CSS, have a look at the CSS Café - Online Meetup: www.meetup.com/de-DE/CSS-Cafe​ twitte...
Stephanie Eckles - Weird Things You Missed About CSS
มุมมอง 845ปีที่แล้ว
CSS is expanding into an immensely powerful language. While modern features are fun to demo, the “weirdness” is what frustrates developers and generates memes. We’ll dive in and make sense of the quirks so that you can spend less time troubleshooting and more time building. To start, we’ll learn how CSS composites DOM element styles together. Terms such as “stacking context” will finally make s...
Kevin Powell - Stop Over-engineering your CSS
มุมมอง 627ปีที่แล้ว
Writing CSS can quickly become a battle against the browser, as well as our own code. Maintenance can also be difficult as we layer things on. This talk explores how to work with the browser and use modern CSS to create robust solutions with minimal CSS. If you love CSS, have a look at the CSS Café - Online Meetup: www.meetup.com/de-DE/CSS-Cafe​ CSS Cafe​ // For more CSS tricks and ...
Heydon Pickering - Why Doesn’t CSS Have Scope?
มุมมอง 310ปีที่แล้ว
People talk a lot about how CSS “isn’t scoped” and that this is a problem somehow. But what do they mean? Isn’t apportioning scope to style what CSS is for? This session will ask whether “global” CSS is such a bad thing, if stylesheets themselves are really a good thing, if we really need to rely on a framework developed at a genocide fomenting social media company to add scope to CSS, and what...
Scott Kellum - Mapping Typography
มุมมอง 1.6Kปีที่แล้ว
The websites we make are nothing less than multi-dimensional objects: the size and shape of them change with every device and browser they are viewed on. We have lots of new tooling to develop layouts for this multi-dimensional landscape, but one crucial element seems to have resisted our attempts at tooling: our typography. How does our typography both maintain meaningful structure while flexi...
Rachel Andrew - When New CSS Features Collide: Possibility and Complexity at the Intersections
มุมมอง 341ปีที่แล้ว
We finally got a proper layout system for the web, and each browser release seems to bring with it another new feature that promises more creative, performant, or intuitive CSS. Each new feature is exciting on its own, but where it gets really interesting is when we combine these things. In this talk Rachel will walk you through a recent history of CSS layout, demonstrating how thinking has evo...
Léonie Watson - CSS Speech
มุมมอง 397ปีที่แล้ว
In these times when almost every device and platform is capable of talking to you, you may be surprised to learn that there is no way for authors to design the aural presentation of web content, in the way they can design the visual presentation. Once this was largely an accessibility issue. Now it's something much broader than that. Edge, Firefox, and Safari, all make it possible for someone t...
Matthias Ott - Forging Links - Web Design Engineering and CSS
มุมมอง 1.1K2 ปีที่แล้ว
We have a problem: modern web technology is getting ever more complex. As a result, teams are struggling to produce their best work and we are often failing the people we are building for. One reason for that: the infamous and ever-growing gaps between design and development. How can we overcome those divisions and deepen our common understanding of the material we are building with? And why is...
Adam Argyle - Oh Snap!
มุมมอง 1.2K2 ปีที่แล้ว
CSS `scroll-snap` is a classic CSS property; small, innocent looking API with huge potential. Learn the basics and value essentials of CSS `scroll-snap`, the ancillary properties `scroll-padding` and `scroll-margin`, debugging with DevTools, plus a bag of snap tricks and glimpse into supporting future properties. If you love CSS, have a look at the CSS Café - Online Meetup: www.meetup.com/de-DE...
Amit Sheen - 3D in CSS, and the True Meaning of Perspective
มุมมอง 14K2 ปีที่แล้ว
3D in CSS, and the True Meaning of Perspective by Amit Sheen Let's take a deep dive into CSS perspective and 3D animation, and learn to harness the power of CSS to add depth to our elements and spice up our design with animated 3D buttons, switches, menus, info cards, interactions, and even text and titles. (May contain some live coding) If you love CSS, have a look at the CSS Café - Online Mee...
Kevin Powell - Flexbox vs. Grid
มุมมอง 6K2 ปีที่แล้ว
Kevin Powell - Flexbox vs. Grid
Ahmad Shadeed - Defensive CSS
มุมมอง 1.2K2 ปีที่แล้ว
Ahmad Shadeed - Defensive CSS
Michael Hladky - CSS Rendering Performance
มุมมอง 1.4K2 ปีที่แล้ว
Michael Hladky - CSS Rendering Performance
Josh Comeau - Secret Mechanisms of CSS
มุมมอง 15K2 ปีที่แล้ว
Josh Comeau - Secret Mechanisms of CSS
Bramus Van Damme - CSS - Understanding the Cascade
มุมมอง 6962 ปีที่แล้ว
Bramus Van Damme - CSS - Understanding the Cascade
Elad Shechter - How to Create Pure CSS Games | CSS Café
มุมมอง 2263 ปีที่แล้ว
Elad Shechter - How to Create Pure CSS Games | CSS Café
Kilian Valkhof - Beyond responsive design: new and future media queries | CSS Café
มุมมอง 2513 ปีที่แล้ว
Kilian Valkhof - Beyond responsive design: new and future media queries | CSS Café
Salespitch
มุมมอง 1373 ปีที่แล้ว
Salespitch
Code Reviews wie sie sein sollten vs. in echt
มุมมอง 1033 ปีที่แล้ว
Code Reviews wie sie sein sollten vs. in echt
Open UI:​ Solving a Multi-Decade Problem​ - Melanie Richards & Greg Whitworth | CSS Café
มุมมอง 3283 ปีที่แล้ว
Open UI:​ Solving a Multi-Decade Problem​ - Melanie Richards & Greg Whitworth | CSS Café
Heydon Pickering - Stacks of Stacks | CSS Café
มุมมอง 1.5K3 ปีที่แล้ว
Heydon Pickering - Stacks of Stacks | CSS Café
Miriam Suzanne - Container Queries & The Future of CSS
มุมมอง 1.6K3 ปีที่แล้ว
Miriam Suzanne - Container Queries & The Future of CSS
Attested TEEs for Transactional Workloads
มุมมอง 173 ปีที่แล้ว
Attested TEEs for Transactional Workloads
Trusted Safety Critical Systems | Ian Oliver | PADSEC 2021
มุมมอง 473 ปีที่แล้ว
Trusted Safety Critical Systems | Ian Oliver | PADSEC 2021

ความคิดเห็น

  • @nChauhan91
    @nChauhan91 หลายเดือนก่อน

    Amazing session,thank you for sharing

  • @Pop_Smart_Refer_API_CALL_Stack
    @Pop_Smart_Refer_API_CALL_Stack 2 หลายเดือนก่อน

    Absolute legend!

  • @buzzer79
    @buzzer79 2 หลายเดือนก่อน

    really good

  • @517design
    @517design 3 หลายเดือนก่อน

    Thanks!! I always had a little anxiety when it came to mobile and breakpoints. For most designs, a few breakpoints work. But what about more complicated designs? Phones alone range from 360w to 430w, which is a big difference. Should I create a media query for every viewport and check the site on every device? If I had unlimited time and my client had an unlimited budget. Even using VW and VH can take a long time.

  • @kole075
    @kole075 4 หลายเดือนก่อน

    Every project, vectors or research Gareth releases seems to amaze me more than the previous. Thanks for sharing

  • @Anandxrfu
    @Anandxrfu 4 หลายเดือนก่อน

    Excellent explanation!! Thank you.

  • @manuelvaal1257
    @manuelvaal1257 5 หลายเดือนก่อน

    superb job

  • @jakemitchell9688
    @jakemitchell9688 6 หลายเดือนก่อน

    Gareth is the spirit animal of software engineers

  • @Killyspudful
    @Killyspudful 7 หลายเดือนก่อน

    Round of applause for the great Jake Archibald. Not forgetting the sterling work of the army of browser engineers who actually implemented these features.

  • @tobiasbrenner7176
    @tobiasbrenner7176 7 หลายเดือนก่อน

    Awesome video, thank you

  • @mktrann
    @mktrann 8 หลายเดือนก่อน

    Great explanation! 🤩

  • @gary-sn4rq
    @gary-sn4rq 8 หลายเดือนก่อน

    Please keep this channel going!

  • @frozentoy4209
    @frozentoy4209 8 หลายเดือนก่อน

    Brilliant! thanks a lot. Love Utopia

  • @anashmaidy
    @anashmaidy 9 หลายเดือนก่อน

    Wow Gareth! Smart and helpful.

  • @NoScriptShow
    @NoScriptShow 9 หลายเดือนก่อน

    Fabulous talk. We love Utopia. I can't thank you enough for creating it. This filled in a few gaps in my understanding of it.

  • @NeverCodeAlone
    @NeverCodeAlone 9 หลายเดือนก่อน

    Very nice video. Thx a lot!!

  • @CSScapism
    @CSScapism 9 หลายเดือนก่อน

    Yes! Fluid design is the way to go. 😁

  • @drorkatzir
    @drorkatzir 9 หลายเดือนก่อน

    הי עמית, קודם כל לייק ועכשיו לצפייה בסרטון :)

  • @julianvelez6563
    @julianvelez6563 10 หลายเดือนก่อน

    Awesome work bro ❤❤

  • @drviagrin3798
    @drviagrin3798 10 หลายเดือนก่อน

    Thank you! Very enlightening!

  • @Thommern1
    @Thommern1 11 หลายเดือนก่อน

    I had to put perspective on the scene div as well as transform-style: preserve-3d on the box div to make it work, has something changed since the making of this video?

    • @9elements
      @9elements 11 หลายเดือนก่อน

      @amit_sheen

  • @blokche_dev
    @blokche_dev ปีที่แล้ว

    This is sorcery! Thanks for sharing. CSS is so capable these days.

    • @9elements
      @9elements 11 หลายเดือนก่อน

      Thanks for your comment. We're glad you liked it! 🪄

  • @ebben23
    @ebben23 ปีที่แล้ว

    I thought width is outward(children to parent) and height is inward(parent to children) according to josh, but when html, body 100% is given an example, he iterate it as children to parent? that confused me

  • @emanuel711
    @emanuel711 ปีที่แล้ว

    'Promo sm'

  • @greggalf6140
    @greggalf6140 ปีที่แล้ว

    VR это очередной мыльный пузырь, для выкачивания денег инвесторов, по крайней, на данном этапе развития технологий. Массовым этот рынок не станет. VR устройства дорогие, тяжелые, громоздкие с кучей проводов. Вы не сможете нормально устроиться на диване или расслабиться в любимом кресле, и уж точно не сможете вкусно покушать пока смотрите любимый сериал. К тому же многие люди испытывают тошноту и головокружение после 20-30 минут использования. Сейчас VR это аттракцион, чаще всего одноразовый, а не устройство для повседневного использования. Цукерберг вложил миллиарды долларов в свою метавселенную, но никто не захотел в нее погрузиться. ) В итоге проект закрыт и тысячи специалистов остались без работы. Кроме того, сейчас нет достаточного количества интересного 3D контента. Возникает замкнутый круг. Контента мало, потому что мало пользователей и производство не выгодно, а пользователей мало потому что мало контента. Пока что 3D в вебе может быть интересно с точки зрения эффектного дизайна, на радость начальству или заказчикам. ) Сайты с 3D подходят для получения премий в сфере веб дизайна и промо акций. Это как высокая мода. Все мы видели такие сайты и восхищались крутыми эффектами, это действительно впечатляет, но этим дело и ограничивается, дважды на такие сайты, как правило, не заходят. Лично я, когда дело касается интернет-магазинов, предпочитаю быструю загрузку и простые понятные интерфейсы, я захожу на сайт ради экономии времени, чтобы максимально быстро совершить покупку, а не для сомнительного 3D развлечения. Мне достаточно простых фотографий или видео для выбора товаров. Если я захочу настоящее 3D я схожу в оффлайн магазин, где я смогу пощупать товар руками и рассмотреть его во всех деталях.)

  • @cwilcox808
    @cwilcox808 ปีที่แล้ว

    If you are befuddled about how to progress through the slides as I was, use the left and right arrows or swipe left/right to change slides (the instructions are on the 4th slide).

  • @NeverCodeAlone
    @NeverCodeAlone ปีที่แล้ว

    Nice inspiration, thx a lot for your passion!!

  • @santosndzekos8816
    @santosndzekos8816 ปีที่แล้ว

    The best

  • @MetapeterUndMetagreta
    @MetapeterUndMetagreta ปีที่แล้ว

    5:52 "pussy" xD :D

  • @emausdetiquicia6636
    @emausdetiquicia6636 ปีที่แล้ว

    This is a hidden jewel! What a beautiful and clear explanation.

  • @muhammedunaise6946
    @muhammedunaise6946 ปีที่แล้ว

    Thanks Sir Super Class

  • @NeverCodeAlone
    @NeverCodeAlone ปีที่แล้ว

    Massive thx for this great video and zour open source community support.

  • @alanmurray4011
    @alanmurray4011 ปีที่แล้ว

    Josh is a joy to listen to and learn from.

  • @o7o7okok15
    @o7o7okok15 ปีที่แล้ว

    I hear the flexbox for 1D grid for 2D layout advice repeated often even by experienced and skilled devs. This is a very helpful contrast that dives deeper into why that may or may not be the case and more about how flexbox and grid work under the hood. Thanks so much.

  • @NektoDesigner
    @NektoDesigner ปีที่แล้ว

    Thanks a lot for the brilliant talk! I've got so many insights from it 🤩 10 out of 5 stars!

  • @kevbonett
    @kevbonett ปีที่แล้ว

    Great video Matthias. "Every Layout" has massively influenced how I create layouts in new projects.

  • @trtnec
    @trtnec ปีที่แล้ว

    39:25, you never told us how you reduced 125 cubes down to 30 divs lol

    • @Etomic-Bomb
      @Etomic-Bomb ปีที่แล้ว

      Each face of the figure looks like a 2D repeating-linear-gradient. Stack 10 faces on each of the 3 axis.

    • @sunflair-wa
      @sunflair-wa ปีที่แล้ว

      I think I am gonna need more explanation about this method. I don't understand! Plus, I would have thought he used pseudo elements for two additional, and box shadow for two more times those, and filter drop shadow for two more on each element. I did that once for a cube, but that was for the lines that would complete the cube, not for a face. Tell me more,@@Etomic-Bomb!

  • @sasagasparovic9351
    @sasagasparovic9351 ปีที่แล้ว

    This should see everybody who is interested in css 3D animation. Very good video

  • @nataliepitts351
    @nataliepitts351 ปีที่แล้ว

    This is amazing thanks!

  • @Dokyto
    @Dokyto ปีที่แล้ว

    thank you

  • @Dipenparmar12
    @Dipenparmar12 ปีที่แล้ว

    Confused but amazing digging. 😶

  • @misterkilluminati6949
    @misterkilluminati6949 ปีที่แล้ว

    Thank you, sir

  • @MrA5DO
    @MrA5DO ปีที่แล้ว

    I hope u make a video like this for ur article about conditional css Thank u for ur effort

  • @kevinwg02
    @kevinwg02 2 ปีที่แล้ว

    this is amazing!!

  • @icantexplainmyfeetjuliecon3522
    @icantexplainmyfeetjuliecon3522 2 ปีที่แล้ว

    I run a WP website using a new theme. i want to progress and was ready to register with WP SHOUT, they didn't recommend i do it without knowledge of css or php but where would i start with that?

  • @natalieflores7722
    @natalieflores7722 2 ปีที่แล้ว

    p̴r̴o̴m̴o̴s̴m̴ 💯

  • @NeverCodeAlone
    @NeverCodeAlone 2 ปีที่แล้ว

    Very nice video. If you want we can do a session together here on YT ;) Greetings to Sebastian

  • @alanbloom20
    @alanbloom20 2 ปีที่แล้ว

    The auto forward and scroll start has given me an idea to make a component that relies on JavaScript into pure css… looking forward to experimenting with that :-) great episode! And people watching this are all developers so I’m sure we can empathise with the experience of moments where the browser isn’t playing nicely in your pres :-)

  • @BlankStare7326
    @BlankStare7326 2 ปีที่แล้ว

    looking forward to playing with this!

  • @jamesgrubb
    @jamesgrubb 2 ปีที่แล้ว

    Great explanation, thank you.