Subin's Blog

Peace ☮️, Love 💙, Freedom 🕊 & Curiosity 👨‍💻

Drupal 8 HTML5 Initiative

HTML, HTML5, Program
Drupal, Open Source

Read {count} times since 2020

Table of Contents

HTML5 is the newest HTML version and it has tons of new features. New input types, output & input (audio, video) and many more. It is now absolutely necessary for projects to move to HTML5 to enjoy new features.

Drupal is also converting to HTML5 in the upcoming stable 8.0 release. Drupal has started the HTML5 Initiative to convert Drupal to HTML5. Now, this will upgrade Drupal into new heights.

HTML5

HTML5 Logo

HTML5 Logo

The latest version of HTML upgrades the old HTML to new technology. Most latest browsers already supports HTML5 which includes :

  • Google Chrome
  • Chromium
  • Firefox
  • Safari
  • Opera
  • IE 10+

What’s awesome about HTML5 is that it contains lots of new stuff that makes Web more like an OS. More integration with the Hardware is one of the core features of HTML5. This means that you can :

  • Record With Web Camera
  • Record With Microphone
  • Play Songs & Videos
  • Animations (2D & 3D)
  • Access User’s File information with restrictions
  • Create & Access Local Site Data
  • Create Offline Websites

JavaScript is also updated along with HTML5 which also has the Canvas API that replaces the use of Flash in websites. This means Adobe will lose its monopoly over web browsers and no more need to install Flash !

I’ve chose HTML5 initiative to blog, because it’s simply the best and most needed improvement for Drupal as it will improve Drupal very much.

The Initiative

Drupal HTML5 Initiative Logo

Drupal HTML5 Initiative Logo

The initiative is made to convert the existing Drupal to HTML5. As part of this initiative Drupal will be revamping most of the templates and theme functions and implementing new form input types and elements. It’s a big challenge, but also a great opportunity to make Drupal‘s markup and CSS the best it can be.

The organizers of the Initiative are :

The initiative is organizing discussions and meetings on what to implement in Drupal 8 and how it should be implemented. They plan to make the themes responsive with CSS and style with new CSS 3 transitions, animations and new effects.

They are also planning to restyle all of current Drupal GUI to something more modern and stylish. This includes comments, site body, themes and others. Mobile is becoming the most used device to access the internet and therefore Drupal should be ready to welcome the mobile users. The initiative organizers have agreed that the Drupal themes are not compatible with mobile and it should be made responsive.

Responsive images and updation of jQuery to 2.0 has been done in Drupal 8. This means that the new Drupal 8 frontend won’t support IE versions of less than 9. This is a good thing, because support of older browsers mean more sized files and if the code is only made for the modern browsers, less size in JS and CSS files can be achieved.

Mobile initiative is an another initiative linked with this :

My Contribution

I joined the group and went over it’s Twitter Page and found an issue. It was “Border on “details” element in system.theme.css producing weird artifact”. I checked the problem and it existed. Apparently, in the Configuration -> Extend page, if the description of each modules are over a specific limit, then it won’t be shown.

I fixed the problem by removing the height limit of “.system-modules td details”, changing “white-space” property and by adding “word-wrap” property. As a whole, it became :

.system-modules td details {
  border: 0;
  margin: 0;
  display: flex;
  min-height: 20px;
  white-space: pre-line;
  word-wrap: break-word;
}

Now, the bug is gone and the description is shown even if it’s long. Here’s my patch on the issue page.

UPDATE : With the patch, there was another problem. Flexbox is not supported on IE 9. I hate IE. But, I think since Flex won’t work in IE, block will be the display property value. So, it will work normally like in Chrome. What made me add flex value is that, in Firefox and extra height is added since white-space is “pre-line”.

Contribute

Anyone can contribute to this HTML Initiative by going to the Group Page and Join. The official IRC channel #drupal-html5 is there to help anyone who want to contribute. There is also a Twitter page of Drupal HTML5 Initiative.

#drupal-html5 is smaller crowd, dedicated to discussions about HTML5 and Drupal. An IRC meeting is conducted every two weeks to discuss priorities, progress and issues. The meeting announcements are posted in the HTML5 group, which sends e-mail notifications for new posts/events.

Show Comments