You see, Internet Explorer is a compatibility solution. We’re not supporting new web standards for it and, while many sites work fine, developers by and large just aren’t testing for Internet Explorer these days. They’re testing on modern browsers.

Chris Jackson at Microsoft. See full article.

Good to see this has been clarified finally. As I say for many years Internet Explorer is not a browser. It’s a compatibility solution without any right to exist any longer.

These automatisms in browsers are giving me a bad time. Who the hell came unmedicated to the conclusion to let browsers transform emoticons into emojis? Text has to remain text and images have to remain images.

Of course I could add the text presentation selector (&#xFE0E) as suffix to every emoticon I write, but that’s not the point. Also the suffix gets removed upon editing, so I need to add it over and over again. Programmatically scanning all texts and adding the suffix automatically is overkill and results in a huge performance loss.

I found an add-on for Firefox which claims to do disable emojis. But it doesn’t work, and also I don’t want a separate add-on for that. Seems like no one thought of a simple CSS setting to disable this crap. I don’t want smileys, emojis, whatever. This is all so painful.

Due to protests against the reformation of the European copyright law known as Article 11 and Article 13, the German version of Wikipedia ist censored for today and therefore unusable.

For now Switzerland is neither affected by that law, nor is it responsible for the bullshit happening in the EU, but still we see Wikipedia censored – at least the German version.

In order to remove censorship install the Stylus browser add-on (see below for links) and import this script afterwards:

@-moz-document domain("de.wikipedia.org") {
html #p-logo a {
    filter: none !important;    
}

body {
    display: block !important;
 	background-color: #f6f6f6;
}

.noscroll {
    position: static !important;
    overflow: unset !important;
}

.mw-parser-output img {
    opacity: 1 !important;
    filter: brightness(1) saturate(1) !important;
    -webkit-filter: brightness(1) saturate(1) !important;
    -moz-filter:brightness(1) saturate(1) !important;
    -ms-filter:brightness(1) saturate(1) !important;
    -o-filter: brightness(1) saturate(1) !important;
}

#siteNotice {
    display: none !important;
}

.mw-parser-output .toc, .mw-warning, .toccolours {
	border: 1px solid #a2a9b1 !important;
	background: #f8f9fa !important;
}

.toc .toctitle,
.toc .toctitle h2,
.mw-parser-output a,
.mw-parser-output div,
.mw-parser-output li,
.mw-parser-output label,
.mw-parser-output caption,
.mw-parser-output code,
.mw-parser-output video,
.mw-parser-output ol,
.mw-parser-output ul,
.mw-parser-output strong {
    background: none !important;
    border: 0 none !important;
}

.mw-parser-output pre, .mw-code {
	color: #000 !important;
	background: #f8f9fa !important;
	border: 1px solid #eaecf0 !important;
}

.mw-parser-output a::selection,
.mw-parser-output div::selection,
.mw-parser-output h1::selection,
.mw-parser-output h2::selection,
.mw-parser-output h3::selection,
.mw-parser-output h4::selection,
.mw-parser-output h5::selection,
.mw-parser-output li::selection,
.mw-parser-output label::selection,
.mw-parser-output caption::selection,
.mw-parser-output ul::selection {
    background-color: #0078D7 !important;
    color: #fff !important;
}

.mw-parser-output a {
    color: #0645ad !important;
}

.mw-parser-output h1 .mw-parser-output span,
.mw-parser-output h2 .mw-parser-output span,
.mw-parser-output h3 .mw-parser-output span,
.mw-parser-output h4 .mw-parser-output span,
.mw-parser-output h5 .mw-parser-output span,
.mw-parser-output span::selection,
.mw-parser-output p, .mw-parser-output p::selection {
    background: #fff !important;
    border: 0 none !important;
}

.mw-parser-output h1, .mw-parser-output h1::selection,
.mw-parser-output h2, .mw-parser-output h2::selection,
.mw-parser-output h3, .mw-parser-output h3::selection,
.mw-parser-output h4, .mw-parser-output h4::selection,
.mw-parser-output h5, .mw-parser-output h5::selection {
    background: #fff !important;
    border: 0 none !important;
    border-bottom: 1px solid #000 !important;
}



.mw-parser-output th, .mw-parser-output th::selection,
.mw-parser-output td, .mw-parser-output td::selection,
.mw-parser-output tr, .mw-parser-output tr::selection {
    color: unset !important;
    background: unset !important;
    border: inherit !important;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background: #fff68f !important;
}

.wikitable > tr > td, .wikitable > * > tr > td {
    border: 1px solid #555 !important;
}

.wikitable > * > tr > td > table > tbody > tr > th {
    border: none !important;
}

#hauptseite h2 {
	background: #d8e8ff !important;
	border: 1px solid #8898bf !important;
}

#hauptseite .inhalt {
	background: #fff !important;
	border: 1px solid #8898bf !important;
}

.inhalt > div,
.inhalt p {
    border: 0 none !important;
    background: #fff !important;
}

}

After importing the script make sure the script is activated. Otherwise it won’t work. I know the script is not perfect. I just checked some articles on Wikipedia and also the main page and they look very well. If you find bugs, feel free to contact me.

Stylus is available for these browsers:

2019-03-15 @ 10:52: Referrer hell Browsers | PHP | Security

Relying on the HTTP referrer is bad. Everyone knows this, but at least the WordPress developers seem to ignore the fact. Also I never understood, why PHP keeps writing HTTP_REFERER with a single “R” in the middle. The correct term would be HTTP_REFERRER.

Anyway, instead of storing the current URL in $_SESSION[‘HTTP_REFERRER’] as one would normally do, WordPress checks for $_SERVER[‘HTTP_REFERER’] instead.

The PHP documentation is very clear on this to not trust this referrer:

‘HTTP_REFERER’
The address of the page (if any) which referred the user agent to the current page. This is set by the user agent. Not all user agents will set this, and some provide the ability to modify HTTP_REFERER as a feature. In short, it cannot really be trusted.

Imagine the following case: you run WordPress from a sub-folder of the root-directory and the referrer is – for whatever reason – set to the web-root of the server, rather than the web-root of your WordPress installation. In fact this is the case on my development machine; I talk about the reason somewhere below.

Now, when you try to delete/recycle a post/page/whatever WordPress checks the referrer in post.php in line 55:

$sendback = wp_get_referer();
if ( ! $sendback ||
	 strpos( $sendback, 'post.php' ) !== false ||
	 strpos( $sendback, 'post-new.php' ) !== false ) {
	if ( 'attachment' == $post_type ) {
		$sendback = admin_url( 'upload.php' );
	} else {
		$sendback = admin_url( 'edit.php' );
		if ( ! empty( $post_type ) ) {
			$sendback = add_query_arg( 'post_type', $post_type, $sendback );
		}
	}
} else {
	$sendback = remove_query_arg( array( 'trashed', 'untrashed', 'deleted', 'ids' ), $sendback );
}

For instance, the code above is taken from WordPress 5.1.1.

So, what happens when the referrer returned by wp_get_referer() contains the wrong URL? You’ll get redirected to anywhere, but the correct location. The only way to somehow fix this without messing with the code is to disable the referrer entirely. You still won’t get to the correct location, but at least you remain inside the WordPress web-root.

Why is the referrer wrong?

As stated above the referrer is set by the user agent (e.g. the browser). It seems like my Waterfox does not set the referrer correctly. For instance, it does not occur in Firefox and Opera. Looking at about:config in Waterfox I found the setting “network.http.referer.trimmingPolicy” being set to “2”. According to this page it will strip the referrer to its origin without any query strings etc.

Setting it back to its default solved the issue, but enables the browser to send the full referrer, which is not desirable by privacy means. On the other hand it did not break any other pages besides the WordPress backend, so I guess it’s time for the WordPress developers to fix their code.

2019-03-04 @ 12:20: Blurry text Browsers | Bugs

In case you use a Chromium based browser you’ll likely have noticed blurry fonts on this website. First I thought it’s related to font-smoothing, but I don’t use such CSS rules, because they are not part of the standard, yet. Also I checked if forcing the browser to disable font-smoothing changes the way the text is rendered. To my surprise it had no effect at all. So, it must be something else that breaks the font-rendering. In Firefox, Edge and IE the issue does not appear. To make a long story short, in Chrome 72 the text gets blurry if it’s positioned using

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

That is quite annoying, because you use this rule to center content where the absolute width and height is unknown. If it’s known you could use negative margins instead.

In Opera the positioning using transform does not affect the font-rendering. However, and now things are getting really weird, the cause of the blurry text is the border-radius of the surrounding div element. Wtf!? Yes, the border-radius causes strange font-rendering. And it’s independent of the actual font. A simple

border-radius: 1px;

is just enough to make it ugly. Additionally the size of the browser window affects the rendering, too. So, if the browser window is resized by 1-2 pixels, the blurring disappears. Here are some screen shots to illustrate the issue:

Chrome 72 using transform
Chrome 72 absolute positioning
Opera 58 blurry font
Opera 58 crisp due to no border-radius

Opera 58 nearly crisp due to resizing the browser window

UPDATE: Unfortunately, the following does no longer work with the latest Chromium version. :(
 

So, the autoplay policy for HTML5 videos in Chromium based browsers has been changed some time ago to disallow autoplay if the video contains audio. The intent was to not bother the user with sound being played automatically upon visitin a website, and in turn give him an option to selectively choose to have sound turned on/off for HTML5 videos. Well, I’ve found a nifty workaorund which allows you to play videos with sound automatically.

Create a video element as usual:

<video id="myvideo" src="myvideo.mp4" preload="auto" autoplay loop muted></video>

 

As you see the video is muted and will therefore play automatically in Chromium based browsers.

Now add this small JavaScript to unmute the video:

setTimeout(function() {
	var video = document.getElementById("myvideo");
	video.muted = false;
	console.log('Video unmuted.');
}, 1000);

 

This will unmute the video after one second. Bingo! Works like a charm. :)

I just experienced and issue where the height of the container of an HTML5 video (1080px, mp4) was calculated wrong. The respective stylesheet had set video width to 100% and no height (defaults to height:auto). The browser rendered the video container to a height of >6000px while maintaining the width of the surrounding div and the actual aspect-ratio of the video. Really strange behaviour. The issue seems to occur in Chrome 64 and Opera 51. Firefox and Edge are not affected by the issue.

2015-05-24 @ 17:18: dancing dots Browsers | Fun

Recently, I did some nice experiment with HTML 5 and CSS on the mediaplayer site. No animated GIFs, no JavaScript, no Java and no Flash have been used. The stream is embedded using the audio HTML tag, while the rest makes use of the CSS animation property. Works fine in Firefox and Webkit based browsers (Chromium, Opera, Safari, …). Enjoy! :)

2014-08-22 @ 10:31: Opera? Next! Browsers

For a long time I used Opera as my main browser, but then some jerk had the idea to totally mess it up by replacing it with Chromium with mouse gestures added. Well, no, that’s not totally correct. They also managed to remove the bookmark manager and introduced the useless stash instead, which doesn’t allow to import your old bookmarks from Opera 12 and/or other browsers (e.g. Firefox). And please, don’t force people to use Opera Sync. I don’t want my bookmarks to be synched to the cloud. So, why should anybody want to use Opera anymore?

This article on Wired.com made me a little curious so, I decided to take a closer look on that add-on they talk about. Read more …


  • About

    We never asked for this.