CSS – Mostly Harmless

November 8, 2015

Internet Explorer. Oh, the pain. Make it stop.

I like CSS. It’s clean, (mostly) standards based and while not all browsers will agree on goofy features, some basics should just work. CSS3 Flexbox support should be on that list for current versions of browsers.

Guess which browser doesn’t support “flex-direction: column”? Internet Explorer will not be updated by Microsoft for anything except security patches. The CSS works fine in the Edge browser.

In my last post I described how to get CSS to visually crop and center featured images. With Internet Explorer 11 the cropping worked but the image wasn’t vertically centered. The “overflow: hidden” did it’s job but the image displayed from the top and the rest was hidden.

Centering images using javascript

This is not a new problem and I found this article on how to use a little jQuery to make a browser do it’s thing. When it’s one image then you can use the class assigned to it.

I ended up adding this class to each featured image.

mh-thumbnail-<?php the_ID(); ?>;

Then I outputted this script where any featured image was.

<script type="text/javascript">
jQuery(document).ready(function() {

	var imageHeight_<?php the_ID(); ?>,
	wrapperHeight_<?php the_ID(); ?>,
	overlap_<?php the_ID(); ?>,
	container_<?php the_ID(); ?> = jQuery('.mh-thumbnail-<?php the_ID(); ?>');

	function centerImage() {
		imageHeight_<?php the_ID(); ?> = container_<?php the_ID(); ?>.find('img').height();
		wrapperHeight_<?php the_ID(); ?> = container_<?php the_ID(); ?>.height();
		overlap_<?php the_ID(); ?> = (wrapperHeight_<?php the_ID(); ?> - imageHeight_<?php the_ID(); ?>) / 2;
			container_<?php the_ID(); ?>.find('img').css('margin-top', overlap_<?php the_ID(); ?>);
	}

	if( BrowserDetect.browser == 'Explorer' ){
		jQuery(window).on("load resize", centerImage);
	}
});
</script>

That sucks. It’s doable, but I needed to use “the_ID()” because each featured image needed it’s own calculation to center correctly.

I did not want that “jQuery(window).on” to fire for anything except but Internet Explorer. jQuery removed the ability to easily detect the browser and for good reason: you should write scripts based on the browser’s capabilities and not the version or software vendor. My javascript skills are worse than my CSS.

I ended up using this script and I can detect “Explorer” now. Adding a line to my child theme’s functions.php file took care of that.

wp_enqueue_script( 'mh-browserdetect', get_stylesheet_directory_uri() . '/browserdetect.js' );

The end result is that for any current browser the CSS does it’s job. For Internet Explorer the javascript gives it that little push to get it to play nicely. I haven’t tried Internet Explorer 8 but I’m not sure I care to.

Working with version 11 already made me feel like I need a bath.

November 7, 2015

Center cropping featured images in CSS

I’m lazy and I like to try and figure out how to get the results I want without a lot of work. In the recent past I’ve uploaded featured images that were 1200 pixels wide and varying heights. I’m playing with a child theme of Twenty Sixteen and wanted to center crop the existing featured images.

I could have re-sampled the cropped images one at a time in Photoshop Elements or ImageMagick (for some CLI bash shell fun). Or I could have used the Regenerate Thumbnails plugin and let that go. Instead I messed with CSS until it worked the way I liked. Read more

August 30, 2014

No more @import for me

Well, at least not for current WordPress child themes.

I like child themes and always recommend that people use them instead of modifying any WordPress theme directly. Using a child theme makes your changes belong to you and they won’t get erased when the original theme gets updated.

I’ve told people to use something like this in their child theme’s style.css file.

/*
Theme Name: Sorbet Child theme for Mostly Harmless
Theme URI: https://blog.dembowski.net/
Description: Child theme for the Sorbet theme
Version: 0.1
Author: Jan Dembowski
Author URI: https://blog.dembowski.net/
Template: sorbet
*/

@import url("../sorbet/style.css");

/* Start your custom CSS after this line */

See that @import line? That had previously been required if you wanted to inherit the parent theme’s CSS. At the moment my child theme does not have that @import anymore and instead I’ve created a functions.php file with these lines in it.

<?php

function mh_sorbet_child_style() {
        wp_enqueue_style( 'sorbet-parent-style', get_template_directory_uri() . '/style.css' );
        // wp_enqueue_style( 'sorbet-child-style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'mh_sorbet_child_style' , 5 );

Which really is a more WordPress way to do it. I added a function mh_sorbet_child_style() where I first queue up the parent theme’s style.css and then queue up the child theme.

Notice how I commented out the second line? The parent theme already queues up the current theme’s style.css file and in my case that is sorbet-child/style.css. In my child theme I do not need to queue it a second time as it’s not necessary.

But I do want to ensure that the parent theme is queued up earlier than the child theme CSS. That’s why I add the wp_enqueue_scripts with a priority of 5 instead of the default 10. That should always load the parent CSS first. If the theme does not queue up it’s style.css that way then I would un-comment out that line.

Just as before, any new CSS will go into my child theme’s style.css file.

March 23, 2014

CSS specificity is your friend

Note to self: Using “Inspect Element” in Firefox and looking at the selector you can avoid styling everything except what’s broken specifically. (It was “.entry-format-badge.genericon” in case I forget.)

February 12, 2012

Old content! Now in 3D!

The guys over at Wired re-published their old review of The Phantom Menace but with a difference. Using CSS and duplicating the content they were able to apply a 3D effect.

It’s readable if you have the glasses. And of course, I do have 3D glasses.

Naturally, I tried to do the same just for giggles. I was able to duplicate the content in both red and blue, but the entire container div uses “position: relative” so the height needed to be set manually.

That can be read as: I haven’t figured out the CSS to dynamically overlay text content on top of each other without the comment box sitting on top of the text. I can’t do it the same way as they do at Wired.

Google to the rescue! To get the effect I wanted, I’m using CSS to color the paragraph fonts a shade of blue while making the offset text-shadow red. For links I reverse that so they look different. It’s not a lot of CSS and if you apply it you better have your glasses ready. It’s easy to do but probably doesn’t work right with old browsers.

Forget old browsers. I opted for this simpler method and put the solution into a plugin.

The plugin inserts the necessary CSS into the head and when a post is tagged “Phantom 3D” the_content gets wrapped in a div with the CSS class “redblue-text”.

Here’s the “Now in 3D!” part

Download, install, and activate a copy of my plugin. It’s a zip archive with one file in it.
Find an old post on your blog and edit it just by adding the tag “Phantom 3D” to the post. The spelling and case are important, the P and D have to be capitalized in the tag or this wont work.
Poof! You’ve just brought new life to an old subject.

For purposes of readability I have not put that tag on this post. Not everyone has 3D classes by their PC.

But I do have an old post titled Adding Slimstats to WordPress from 2007 and that’s a good candidate.

The info in that post is horribly outdated (I mean come on, I recommended editing wp-config.php) and totally unnecessary these days. As indicated today in the comments, there are just better ways to implement Slimstat in WordPress that are supportable.

But we all know that by adding 3D everything is improved. I’ve made that post new and exciting not by updating the content but by simply applying a special effect.

If that’s good enough for George Lucas, then it’s good enough for me. 😀

December 24, 2011

It’s not my fault, the wife uses Internet Explorer 8

For my home PCs I typically run the latest and greatest web browsers. I even run Internet Explorer 9 which is even not that bad™. Lately I’ve been vacillating between Firefox and Chrome.

At my wife’s work they’re now using Internet Explorer 8. That’s an improvement, they’ve been on version 6 for years.

This blog’s theme uses CSS border radius effectively and it doesn’t render correctly on version 8. You get square blocks where you wanted round corners. The next version it works fine, version 8 and below not so much.

There is a work around but it’s ugly. Add conditional CSS to your head for any version of IE less than 9 and reference PIE.htc from CSS3 PIE.

This is easily done by adding some code to my theme’s functions.php file.
Read more

Tag: CSS (page 1 of 1)