9elements
9elements
  • Видео 44
  • Просмотров 64 931
Peter Kröner – Style-Sharing with Web Components and Shadow DOM
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, whether using build tools or not, in pure vanilla form or with supporting software, and ranging from cutting-edge methods to older standards. The discussion will cover the pros and cons of each approach, and we'll also take a look at future web standards for style sharing.
------------------------------...
Просмотров: 183

Видео

Bramus van Damme - If View Transitions and Scroll-Driven Animations had a baby…
Просмотров 9175 месяцев назад
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,1 тыс.6 месяцев назад
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,4 тыс.8 месяцев назад
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
Просмотров 2209 месяцев назад
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
Просмотров 83210 месяцев назад
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
Просмотров 61111 месяцев назад
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?
Просмотров 293Год назад
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,6 тыс.Год назад
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
Просмотров 324Год назад
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
Просмотров 369Год назад
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,1 тыс.Год назад
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,1 тыс.Год назад
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
Просмотров 13 тыс.2 года назад
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
Просмотров 6 тыс.2 года назад
Creating layouts with CSS can be tricky, and it's complicated by the fact that we have two different layout tools in Flexbox and Grid. Deciding which one to use in any given situation isn't always obvious, but it can be made a lot easier when we lean into the strengths of each one. In this talk, we'll break down what the strengths of both Flexbox and Grid are, helping you simplify the decision-...
Ahmad Shadeed - Defensive CSS
Просмотров 1,2 тыс.2 года назад
Ahmad Shadeed - Defensive CSS
Michael Hladky - CSS Rendering Performance
Просмотров 1,4 тыс.2 года назад
Michael Hladky - CSS Rendering Performance
Josh Comeau - Secret Mechanisms of CSS
Просмотров 15 тыс.2 года назад
Josh Comeau - Secret Mechanisms of CSS
Bramus Van Damme - CSS - Understanding the Cascade
Просмотров 6772 года назад
Bramus Van Damme - CSS - Understanding the Cascade
Elad Shechter - How to Create Pure CSS Games | CSS Café
Просмотров 2122 года назад
Elad Shechter - How to Create Pure CSS Games | CSS Café
Kilian Valkhof - Beyond responsive design: new and future media queries | CSS Café
Просмотров 2462 года назад
Kilian Valkhof - Beyond responsive design: new and future media queries | CSS Café
Salespitch
Просмотров 1293 года назад
Salespitch
Code Reviews wie sie sein sollten vs. in echt
Просмотров 1013 года назад
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,5 тыс.3 года назад
Heydon Pickering - Stacks of Stacks | CSS Café
Miriam Suzanne - Container Queries & The Future of CSS
Просмотров 1,6 тыс.3 года назад
Miriam Suzanne - Container Queries & The Future of CSS
Attested TEEs for Transactional Workloads
Просмотров 143 года назад
Attested TEEs for Transactional Workloads
Trusted Safety Critical Systems | Ian Oliver | PADSEC 2021
Просмотров 453 года назад
Trusted Safety Critical Systems | Ian Oliver | PADSEC 2021
Adam Argyle - Requesting color from CSS in 2021 and beyond | CSS Café
Просмотров 7993 года назад
Adam Argyle - Requesting color from CSS in 2021 and beyond | CSS Café

Комментарии

  • @517design
    @517design Месяц назад

    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 Месяц назад

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

  • @Anandxrfu
    @Anandxrfu Месяц назад

    Excellent explanation!! Thank you.

  • @manuelvaal1257
    @manuelvaal1257 3 месяца назад

    superb job

  • @jakemitchell9688
    @jakemitchell9688 3 месяца назад

    Gareth is the spirit animal of software engineers

  • @Killyspudful
    @Killyspudful 5 месяцев назад

    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 5 месяцев назад

    Awesome video, thank you

  • @mktrann
    @mktrann 5 месяцев назад

    Great explanation! 🤩

  • @gary-sn4rq
    @gary-sn4rq 5 месяцев назад

    Please keep this channel going!

  • @frozentoy4209
    @frozentoy4209 6 месяцев назад

    Brilliant! thanks a lot. Love Utopia

  • @anashmaidy
    @anashmaidy 6 месяцев назад

    Wow Gareth! Smart and helpful.

  • @NoScriptShow
    @NoScriptShow 6 месяцев назад

    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 6 месяцев назад

    Very nice video. Thx a lot!!

  • @CSScapism
    @CSScapism 6 месяцев назад

    Yes! Fluid design is the way to go. 😁

  • @doriomer
    @doriomer 6 месяцев назад

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

  • @julianvelez6563
    @julianvelez6563 7 месяцев назад

    Awesome work bro ❤❤

  • @drviagrin3798
    @drviagrin3798 8 месяцев назад

    Thank you! Very enlightening!

  • @Thommern1
    @Thommern1 9 месяцев назад

    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 8 месяцев назад

      @amit_sheen

  • @blokche_dev
    @blokche_dev 9 месяцев назад

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

    • @9elements
      @9elements 8 месяцев назад

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

  • @ebben23
    @ebben23 9 месяцев назад

    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 10 месяцев назад

    'Promo sm'

  • @greggalf6140
    @greggalf6140 11 месяцев назад

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

  • @cwilcox808
    @cwilcox808 11 месяцев назад

    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 11 месяцев назад

    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 11 месяцев назад

      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

  • @kevinwaag9976
    @kevinwaag9976 Год назад

    this is amazing!!

  • @icantexplainmyfeetjuliecon3522

    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 Год назад

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

  • @NeverCodeAlone
    @NeverCodeAlone Год назад

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

  • @alanbloom20
    @alanbloom20 Год назад

    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 Год назад

    looking forward to playing with this!

  • @jamesgrubb
    @jamesgrubb 2 года назад

    Great explanation, thank you.

  • @arshad1781
    @arshad1781 2 года назад

    Nice

  • @DmitrySharabin
    @DmitrySharabin 2 года назад

    Excellent session. Thanks for sharing it! 🙏🏻

  • @yashwanthsrini
    @yashwanthsrini 2 года назад

    Great video. Thanks to Kevin and everyone else involved.