html – My Brain BLOG

Basic HTML

Dana Sallow wrote me a note:

“Hello – I read your page markohoven.com/2020/05/15/css-stylesheet-selectors/ and have two words: incredibly useful! I loved the HTML-related resources you mention there. I shared your post with a co-worker, and he shared with me a very helpful guide on how to use HTML. https://www.websiteplanet.com/blog/html-guide-beginners/ Since your readers might need this for either their work or personal life, I do believe they’ll find it useful if you add it to your page. Thanks again for the resource! Best, Dana.”
So here it is:

Break-inside: avoid

Remember… (see source)
When using the following in CSS:

   break-inside: avoid;

also add to the same item:

   overflow: hidden;

Otherwise Firefox will give you a headache.
Have a nice day 🙂

iOS fixed layers and scrolling

If it does not scroll as expected on iOS, try:

height: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;

That’s all! Continue reading iOS fixed layers and scrolling

center

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.

So let’s make it a decision tree and hopefully make it easier. Continue reading center

Loading speed vs code readability

As a developer I like structured code. The browser however could not care less about the right amount of tabs and spacing; it just need to get the code, with as little data-traffic as possible.

So, what do I do? When speed is really important, I create my stylesheets and javascripts as I normally do, but then also convert these into a “.min’ version – minified, and refer to those from the html source code.

To get this done Continue reading Loading speed vs code readability