Hacker News Reader

Comment by davej | Hacker News Reader

I agree, most of the code in the library is for element navigation. Why not open-source that and let people define their own CSS props.

By the way, I believe it uses the `outline` CSS property as opposed to `border` (border changes layout, outline doesn't).

View on HN

Yes it's outline, just because it is probably the less used css rule available for the scope. Probably the alternative could be box-shadow. Having to modify borders will probably result in breaking third parties CSS etc.. more troubles guess.

The code is already open-source, feel free to open issues, fork and PR also if you want to add new features, the door is open wide!

Yeah, you also have to account for box sizing by adding borders. What I've done for this in the past is use a css &:after pseudo-element and make it absolutely positioned, and set width and height at 100% and position it at left: 0 and top: 0. You can do things like give it a fill with opacity too, to highlight not with just outline but color overlay too.

.outlined:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; width: 100%; background-color: green; opacity: 0.3; }

.outlined { position: relative; } // this part my be a poor assumption

Hi, yes this is another alternative, probably the best one but it's hard actually to find the real best one because in the end everyone use different styles, different css frameworks, different use cases, in many cases it may break something in many others not, you know :)

Anyway appreciated a lot your example and your tips, let's just wait for some feedback from people who use it and make decisions more clear.

Thank you really :)

Reply on news.ycombinator.com