Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.
On the other hand I don't find myself using the clearfix ( actually I ditched floats for layouts, long time ago ), css triangles ( usually some unicode arrow or an image ), gradients / animations and shadows are out of the current trend ( everything is flat / material these days ).
> Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.
Unless you want to show a tooltip in a container that has `overflow: hidden`, since it will then clip the tooltip as well. You need to use JS in that case and put the tooltip directly in body, then position it absolutely.
EDIT: Sorry, now I read your comment. Yeah that's true, you will have to make some exception with your container in this case. But this sounds like an edge case to me.
came here to say the same. First few examples are about float and cleafix - I haven't faced those in years now!
Not sure I agree about the triangles and other shapes. background-img and linear-gradients allow for some nice solutions and avoid having to load or deal with an image.
Just for fund, check https://a.singlediv.com/ from Lynn Fisher, she draws some pretty awesome stuff mostly with linear-gradients :)
You can position the tooltip on the left, right, top, bottom in the markup with a class name. This way if the tooltip is in the header you can use e.g. `tooltip-bottom`.
Having 10kb tooltip library for doing this automatically is a bit of an overkill for me [1].
>Having 10kb tooltip library for doing this automatically is a bit of an overkill for me
Of course, but I hardly see how that's comparable to writing a React class "ToolTip" which is smart enough to know where the side of the screen is, and comes with the ability to use JS.
I'm curious to know this too. A responsive "pull-right" that sends an element to the right hand screen edge no matter the screen size, without having it shift onto the line below.
I'm sure it can be done if you create enough media selectors for every common resolution but outside of that...
Gradients are coming back. Its a contrast to the flat. I remember I first noticed it on github's conference page. I see them everywhere now (Asana is another).
My own favorite is a table that can selectively show hide columns. Just make the button to show/hide a label that controls a hidden checkbox which then controls the display property of cells.
FYI for "System Font Stack" - There is no "-windows-system" CSS declaration, so this is why the list of fonts is long... it includes each windows font. More is explained here, as well as an alternative way to load the fonts using @font-face:
i had never heard of this "trick" before today. why does this exist? i thought `font-family: sans` was meant to give you your OS or browser's default sans-serif font. why do something so elaborate?
The default sans-serif font in Firefox for Mac is Helvetica, but the default font for macOS is San Francisco. If you want to have your page use a system-looking font, particularly if you're building an Electron app like Slack, you might want to get past the browser defaults and instead use the system defaults.
I used macOS fonts in my example, but this applies to every platform.
Recently I was wondering how they created that click animation in material design. So i made my own and you can check the code here https://github.com/ibudiallo/buttons
Note that it works without js, but js allows to position the button press effect right under the mouse.
On one hand, great, useful, and very pretty. On the other hand this reinforces the use of such antiquated and hacky concepts as clearfixes, or floats for layout.
Also, the ellipsis truncation is very tricky to pull off. The parent element needs to be a block if I remember correctly.
I think they just implemented it badly. I have seen a similar thing in Typography.js [1] recently and probably because of Baader-Meinhof phenomenon, I saw it multiple times afterwards and just assumed that was now the default way to render underline.
Try the Doelger theme at Typography.js, it looks pretty good actually.
Popout menus are often created with Javascript with a delay of a second or two before they disappear, such that slower users can move their mouse from a tall element, over non-menu space, onto a menu item.
With the CSS popout menu, the menu disappears instantly, making navigation more difficult.
People provide a CSS example but omit that the parent needs to be position relative, only works with absolute positioning (which it isn't set to in the example), only certain element types, or that the tree needs a higher z-index than the sibling or it won't work.
At least on Stackoverflow someone often remarks in a reply about the gotcha/limitation.
To be fair, centering with flex doesn't require the parent to have any particular positioning set. The only reason you need to set the width/height is because the centering happens inside 0 size box, which wouldn't happen if your problem is centering something inside existing box.
The flexbox method does work with an unknown height. The point is that the container has to actually have a height (one way or another) that is greater than the height of the aligned element, otherwise vertical alignment is all equal anyway! This is as true of the flexbox approach as it is in your example (which explicitly sets the containing 'section' element's height).
can i use custom css element's defined in some other library in another css?
e.g. I have some html say <nav> ...</nav>
i have a separate css style.css which would be
.nav{
<class defined in the library i am importing>
}
basically i don't want to spray div/classes everywhere while i am experimenting with which css lib to choose, is there any elegant way to do this?
Use libraries that come in Sass form or figure out how you use them in a Sass-y way. In your Sass file (style.scss), write .nav { @extend .lib-nav-thing } and compile a new style.css. You won't have to touch your HTML.
On my machine the "pretty" underlines are conspicuously uglier than the standard ones. This kind of thing is why I hesitate to re-implement standard browser behavior for the sake of improvement. Even if I don't like how underlines look today, I'm not going to implement my own. It will not age as well.
Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.
On the other hand I don't find myself using the clearfix ( actually I ditched floats for layouts, long time ago ), css triangles ( usually some unicode arrow or an image ), gradients / animations and shadows are out of the current trend ( everything is flat / material these days ).