Topic: CSSAll Posts

Object-fit and overflow: hidden

Use 'em both. It is not explained in this Mozilla page, but on mobile #Chrome, when using object-fit, the overflow is drawn. This is not the case on desktop. Maybe that's a bug, maybe #Mozilla doesn't care, 'cuz it's not their browser, just be aware of that.

#WebDevelopment #flexbox #mobile #css

Posted 9 May 2019 by Brian

SVG Embedding

If you use an img tag to add an #SVG to your web page, you can't use #CSS to style it. Which is a shame, because I want to change the colors interactively or use the same icon with multiple colors quite often. Actually, almost as often as I use SVGs. But, I don't want to see the actual definition of the SVG repeated all over the place in my #code. There are probably a few solutions to this, but #PHP readfile() is my current favorite. Simply call #readfile to output the contents of a file. You might have to edit the SVG to remove some cruft, but it won't affect the way it looks. Plus you might want to add some classes to it. Then you just treat it as an inline SVG for styling purposes. Handy, right?

#WebDevelopment

Posted 2 May 2019 by Brian

Chrome Bug w/transitions

I have discovered a minor #CSS #bug in #Chrome. I don't think it existed before, because I don't remember the issue that I am now seeing. It does not occur in #Firefox.

The button element has User Agent Styles for text and background color. If you set these to something else, but also have a transition on those properties, you will see a transition on page load. This transition will change from the user agent style, to the style you set. This ONLY applies if you are using a linked style sheet. Which, you are, because you don't want to have to update styles on multiple pages. I assume this is not restricted to the button element, that's just my example.

My biggest problem was that this caused my buttons to change size because I had the transition set to 'all'. I changed it to only affect the required properties, and the brief color change is much less noticeable.

Maybe someone will bump into this and save themselves a headache.

Posted 12 Mar 2019 by Brian

Speed up CSS

I learned about a new #CSS attribute that's pretty cool: will-change.

/* Warns the browser transform will be updated a fair amount */
will-change: transform;

It basically tells the browser "hey, this attribute's probably going to change on you, so you better be ready." I don't know exactly how it works- if it pre-processes most likely updates, passes processing to the GPU, etc- but it fixed some problems with moving elements smoothly on mobile for me.

MDN actually says it's "intended to be used as a last resort" which is always a good sign for a new web standard IMO. It's good to keep our devices on their toes.

I'm betting we'll see it being abused to heck if it hasn't been already. It may just become the new !important.

#WebDevelopment

Posted 7 Mar 2019 by Josh

About

You found me! I'm Brian Bogedin. This is my website and blog. Obviously. Anyway, I'm a full stack web developer and game programmer operating in Southeast Michigan. I do freelance, too, so feel free to contact me with business inquiries. Thanks for stopping by!

Ping me: brian@bogedinbr.com

Projects

This blog!

I'm making this blog from scratch. No CMS, frameworks or libraries! Just MySQL, PHP, JS, HTML and CSS. Is it necessary to create a blog from scratch? No, but it is great for learning, and customization. Does your blog have hashtags?

DrawingWiffWaffles.com

Website for a youtube channel that creates instructional and entertainment videos about illustration. I built the site and manage giveaways there from time to time. Currently working on a miniature custom CMS so that the site owner can administer the giveaways without my assistance.

SECO Tools

I do some work here and there for a company that sells mill tooling. Most recently built a batch processor for their tool converter. Basically, it takes a bunch of competitor product numbers and returns the information on tools offered by SECO with similar specs. Still needs some user friendliness enhancement, but it's currently only for internal use.

Geospin

This is a small couch multiplayer game made in gamemaker for a game jam I organized with some friends. Up to 6 players use controllers or the keyboard to fire rockets on the side of their city to rotate a planet and avoid incoming missile. The trouble is, everyone else is trying to rotate the same planet! Download it on itch.io!

Showpony

Mulitimedia engine being developed by my friend, Josh Powlison. Plays audio, video, comics, text, and kinetic novels. Cool stuff. I'm helping out a tiny bit. See the demo here.