2 HTML Elements I Never Used!? (Details & Summary)

[@DesignCourse]

What other lesser-known HTML5 elements should I cover?

[@pj7546]

I think you should try Im not really sure how to use it

[@aglowkeys]

Thanks for the video! I learned about those elements around a month ago, but have never used them yet. It would be nice to see you experiment with the and tags. I don't really understand how to use them.

[@elvinchu]

[@WinterSnowism]

​@@pj7546 optgroup?

[@pj7546]

@@WinterSnowism Its

[@vimalrajm1419]

8:26 'open' is an attribute added to details tag when clicked on it, it is same as input[type=text]

[@sebastienlehmann3815]

You may improve your animation by using transform: translateY(-10px) instead of maring-top. Also using rotate(.5turn) instead of changing SVG url.

[@markabc178]

Could you explain why the animation is better with translateY instead of margin-top?

[@snakone]

@@markabc178 things like margin, width, padding are the most expensive properties to animate

[@markabc178]

@@snakone Like performance wise? good to know

[@snakone]

@@markabc178 Gary got a video talking about css animations and which elements are the most expensive to move or alter

[@sebastienlehmann3815]

​@@markabc178 margin-top involve redrawing layouts, paints them and compositing while translate involve only compositing, it's thus more performante and can use graphic card to speed up : developers.google.com/web/fundamentals/performance/rendering In addition, thanks to graphic card, it can draw subpixels movement, it then looks much smoother : kzbin.info/www/bejne/Y2eVpoONit2amck&feature=emb_logo Wrap up : it's nicer, faster, and consume less energy - whenever you can use a transformation (or opacity), you must use it.

[@AlphaScorpii86]

The outline actually serves a purpose from a UX standpoint: to indicate that the element is focused when navigated with a keyboard.

[@MaxWeir]

That’s awesome, we added this also for article reference content and works well, it’s the default style currently but this example is really nice and shows what you can do

[@markabc178]

Please do more of these. Really helpful and interesting

[@leandro55pt62]

when i put an animation , at the fisrt click it works perfectly but if i close and try to open again it dosent do the animation

[@GammaWraith]

Nice find Gary, it's been a while. Glad to be back ! :)

[@jsphpndr]

@DesignCourse this is hilarious! I have used these in one client project. That’s it, but I see others use it all the time. Mostly, my students. I teach an intro course and excited students want to use everything in the HTML arsenal to impress me. Needless to say, my students pretty much keep me up-to-date. 😂😂😂

[@siddharthpatel3365]

LOL I LITERALLY STARTED USING THEM YESTERDAY TOO

[@CodingUnited]

Twitter?

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@acke5180]

Great!I I did it last time with JS..but this one is a must have knowledge to pack it under the belt! Well done!

[@katemc516]

thanks Gary, I went a step further to use font awesome in a span, and change the span to 'rotateZ(90deg)' in the details[open] I have to keep reminding myself :" don't underestimate the power of CSS! "

[@FatmaGul29]

how did u use font-awesome for that?

[@pgmattic]

Gary is the man. He is the best design channel I came across.

[@vaspar5852]

I was wondering how to get an accordion and yes you discovered it! Thank you

[@quirkymarshmallow9324]

Thanks for showing this. I plan to use it at my work. Really neat!

[@joeltecua4204]

Gracias por compartir tus conocimientos, sin duda un gran soporte de aprendizaje, saludos desde Ciudad de México.

[@Well_This_Guy_Says]

Awesome video, I always used to use JQuery accordions, but I like this approach. What would have put this over the top would be if you shown how opening one would close one that was already open

[@RuneScapeZammy]

Not sure if its possible with those tags. You could use JS to reset the open attribute. But if you want a CSS only solution for this use case take a look how to use input:checked. If you have radio buttons with the same name only one of those can be checked at the same time. Then you can style the element you want to style using ~ or +.

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@mablisho]

Great video man, i have a question maybe you can guide me, i need to get rid of the arrow but only using css inline html, like something like that, the reason is that i dont have access to de css file because i only have access to entries in wordpress. Thanks in advance.

[@fullstack_journey]

There are a looot of wired uncommon tags like these... great video Gary 🔥

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@ognjenstefanovic4606]

Instead of changing the image from down to up, you could rotate it for 180 deg, with transformation. Might look cooler.

[@hlopes586]

why is that when im testing it only animates the first time...?

[@CoolScratcher]

Amazing new style! I love it.

[@MultiMemich]

Adding rotation animation for the svg would be better, but still this is awesome stuff, keep it coming.

[@nicholasfactor]

right

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@robertaw1221]

That is what I expected Gray to do when he mentioned about it changing.

[@mauriciabad]

Actually this HTML tags are not recommended for most use cases where you need acordions. The recommendation for building accessible HTML FAQs is with data lists (dl, dt and dd tags) and a bit of js: www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-faq.html

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@zsoltbalogh2746]

Many thanks for your work! Unfortunately in 2020 we still have to consider IE which does not support this. I think it would be useful if you could include the browser support in your videos and maybe show how the page looks like in browsers which does not support this element.

[@popovicialincatalin]

Uh, I don't think so... Internet Explorer has been completely depricated and is no longer in use.

[@xelsor]

using &:hover { background: rgb(120, 120, 120); } does not work for some reason

[@giorgosbathory8698]

how do i align them in to the right side of the page

[@friday2.054]

Dude....will you make video on most importants tag with CSS examples....plzzzz

[@madhusudhan5984]

Hello sir, I often confused how to use media quaries . Can you please make a video for that sir.

[@elfridhasman4181]

Thank You Very Much Gary😊

[@nicholasfactor]

how come you don't just rotate the svg instead of having 2 files, what's the benefit of that? (Maybe I'm dumb) also you could animate it lol

[@sahej97]

New intro looks good

[@maxdevgenius5469]

awesome i never new it before thanks for the tricks bro always present for the tutorials

[@victordavid2292]

can we use this for dropdown menu nav bar?

[@ahsankhan-nc6wd]

very very awesome.. sir you save my day

[@AdeyCoder]

Awesome ☺ makes things simpler thank you.

[@randeltagayun1654]

Wow intead using checkbox for accordion maybe i'll used this thank you for this 👆

[@habibmahbub1519]

browser support?

[@CodingUnited]

caniuse.com/details

[@cybermaster6752]

@@CodingUnited kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@rinegolo1431]

I don't know how it looks and it respond in mobile but the desktop version of coin desk have a lack of design, friendly colors and too much white space in my opinion. Also robinhood desktop app scks, I know they are pretty much new but they have enough money to pay to make it way better.

[@hayleykornilenko6314]

I have noticed the svg does not work on Firefox. Has anyone else had this issue?

[@julianandresrodriguezalman4270]

I have a question, how I could animate when it is closing?

[@wejesuss-1104]

currently, just with javascript code

[@thetranquilchannel]

If you’re using VS Code, you can try out the Browser Preview extension to see updates right in VS Code. marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

[@window.location]

I saw this on the npm page yesterday www.npmjs.com/package/helmet#reference but didn't know how easy it is. Thanks, Gary

[@Harsh-fd4ml]

Hey please make video on how to create video player

[@aaronbell5994]

This is awesome!!

[@nerdiloo9863]

Hehe I have to admit I started using this in 2019 - good find DC.

[@nicholasfactor]

sameeeeeeeeeeeeeee

[@galynaprog857]

Not supported in IE

[@dgloria]

Hi Gary, I need to remake my site, because I'd like to change the content. Do you have some kind of collection of the best designs I could get ideas from please? Thank you.

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@pj7546]

Try the outgroup

[@DevsLikeUs]

Love it !

[@thevividversatilechannel4807]

2:54 Just put *1 at the end! details*1 instead of details

[@eftiprwtopapadakis9310]

It seems that html5 and css3 have so many to offer us that javascript is really for advanced behavior

[@DaviAreias]

It seems that html and css already have a lot of built in efficiente solutions, but they were forgotten because everyone loves using expensive frameworks

[@arturlomakin3555]

I knew this, but I didn't know how to style that

[@eddytech3767]

I just used them last week, when I was learning sass

[@consig1iere294]

Please do a 2021 version of this.

[@supportic]

Used it more often in markdown

[@LabhamJain]

Soooooooooooooooooo Awessssssoooooommmmmeeeee!!!!!😘😘😘😘😘😘😘😘😘😘

[@prakashacharya]

I have been using js for years

[@nedalturas]

thank you!.

[@tomsharp16]

1:23 "so sign up for free or get 20% off"

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc

[@pazdikan]

🔥

[@Htbaa]

Thanks for the video, didn't know about these. outline:none; on controls is a terrible thing to do for accessibility, please don't do that.

[@PappuShankar]

First comment and view

[@ruiyang626]

Hi

[@AsithWijenayake]

👏👍

[@devdin8157]

Hi I'm first

[@portlyoldman]

Absolutely love your tutorials 😁 BUT if you could PLEASE avoid saying “go ahead and” and “real quick” all the time it would be great, it really grates on non American English ears. These seem to have crept into American English 🥺 . “Real quick” is simply unnecessary filler and “go ahead and” should only be used when permission is being granted.

[@cybermaster6752]

kzbin.info/www/bejne/mV6WiZVjhsZlaLc