What's the preferred unit in CSS for responsive design?

Posted: 2018-04-04T17:16:00+05:30
Obviously, it's %. What a stupid question? Well, you can sometimes use em maybe. Or, maybe vh/vw.  Well, anything except for px for sure.

Sadly, the answer isn't as simple as that. In fact, there is no proper answer to that question and depends a lot on the design decisions taken rather than a fixed rule of making websites responsive. Funny thing is, many times you might actually want to use px instead of % because the later is going to mess things up. In this blog, I will try to describe some scenario's when each of the units work better in a responsive environment.

PS: All of this is mostly my personal opinion and working experience. Not to be mistaken as a rule book.


Where to use %?

Basically, anywhere you have certain kind of layout or grid involved. I use % whenever I feel that the screen needs to be divided into proportions rather than fixed sizes. Let's say I have a side navigations area and the remaining body in a website. I would use % in this case to measure the margins and the area of distribution. Since I definitely want to vary them on changing screen. Or a grid of rows and columns. I will want the width of the grid to be in percentage so that the number of columns allowed change with the width of the screen.

Another use of percentage is while determining the margin of an element. You might want to have much more margin on a wider screen than in a smaller screen. Hence, often the margin-left and margin-right are advisable to be in percentage.

Also, for fonts and typography elements, you should use % since px isn't compatible with W3C standards of accessibility.

PS: A lot many times, it is preferable to use flexbox and grid layout instead of trying to layout things via margins and floats.

Where to use px?

To be honest, yes, it is better to avoid px when you think of making things fluid in responsive. But having said that, there are some cases where even in a fluid design, you want things to have a fixed value. One of the most commonly used examples is top navigation height. You don't want to change the height of the top navigation bar's height with the change in screen size. You might want the width to change or show a hamburger button instead of showing the list of hyperlinks, but you most often want to keep the height of the navigation bar fixed. You can either do it by setting height attribute of CSS or maybe you want to do it with padding, but the unit mostly should be px.

Another use would be for margin of an element but this time the top and bottom margins instead of left and right. Mostly, when you have your website divided into sections, you would want the margin between the different sections to be of a fixed value and not to change with the screen width.

Where to use em?

em is mainly to be used while setting font-sizes and typography elements. By that I mean wherever I have a text involved it is often good to use em. The size of em basically depends on the font-size of the parent element. So if the parent element has 100% font-size (default browser font-size), then 1 em = 16px. But em is a compounded measure. So the more and more nested elements you have the idea or measure of em keeps changing. So it can often be very tricky to work with em. But this is also a feature that might sometimes help to get a compounded font size.

Where to use rem?

The main difference between em and rem is rem depends on the font-size of the root element of a website(basically root-em) or the <html> element. So whatever be the font-size of the root element, rem is always computed based on that and hence unlike em, the computed pixel value is more uniform throughout the website. So rem and em usability depend highly on the use case.

Where to use vh or vw?

vh and vw stand for viewport height and viewport width. The advantage of vh or vw over width is that you can control based on both the height and the width of the media screen that appears in the viewport. 1vh basically means 1% of viewport height. So if you want something to take the entire height of the screen, you would use 100vh. This has applications in both setting width and also setting font-sizes. You can mention the font-size of a typography will either change based on the height or on the width of the viewport instead of the font-size of your parent element. Similarly, you can also set line height based on viewport height instead of the parent element measures.

Where to use media queries?

Even after using all of the above strategically, you will almost necessarily need to use media queries. Media queries are a more definitive set of CSS codes based on the actual media screen width of the device. Mostly, we use it in a conditional way similar to other programming languages. So we can mention if media screen width less than 720px, make this 10% wide, else make it 25% wide. Well, but why do we need it? The main reason for this is the aspect ratio of screens. In a desktop, the width of the screen is much more than the height and hence 25% wide might not occupy a whole lot of screen. However, in a mobile screen where the width is much smaller than the height, 25% might actually occupy more area than you want it to. Hence media queries are needed so that when there is a transition from wide screens to narrow screens, even the percentage widths are changed.


As far as I feel, there are use-cases and scenarios where each of them might be useful. Yes, px is the least used unit if you are concerned about responsiveness, but there will definitely be some elements on your website to which you want to give a fixed width or height. All the other measures are changing, but the way they change is different from each other and hence depends a lot on the designer and the frontend. Also, CSS4 has added a lot of new features which at least make handling of layout lot easier than before.

Comments

It works in Firefox, but not in Tor Browser

Posted: 2018-01-25T12:11:00+05:30
In today's world, where websites play a major role in providing various technical services to users, web developers have an important role. Though the war between back-end v/s front-end is never ending, nonetheless we all can probably agree on the fact that front-end does provide the non-tech users with an interface so that it becomes easier for them to use the back-end functionalities. Thus, the great problem of making front-end easy to use while also looking good comes into play. With the advent of the web, web technologies have also advanced a great deal. One of them is definitely CSS. CSS now has enough power to create a really interactive decent looking website only using it. With attributes like filter, masking and so on, you no more even need photoshop to change your images every time; with the help of grid-layout and flex you don't need to bang your head about laying out items properly on your webpage properly. Now you must be wondering why am I telling all this and not coming to the point. Well, the reason being if you don't use these new advancements (which I wonder why you wouldn't), you might not have ever come across the question. The biggest question today that a web developer faces is will the code they write actually work on all the browsers. And hence the title.

What is tor and tor browser?

Tor is a software program that helps you stay protected on the web in numerous different ways. The main idea is to keep your internet activities anonymous by not allowing the web pages to learn your exact web identity. It also protects you from people who are watching your internet activity (yup, you are being watched) by keeping them unaware of the sites you visit. 

Tor browser is a web browser that helps you use tor on various different operating systems. So as you can understand since privacy is a very important thing, so checking if the front-end you are making for a website, works in tor browser is also pretty important.

Tor browser and Firefox

Quoting Ethan Tseng and Richard Barnes from the blog Tor at the Heart: Firefox

If you’ve used Tor, you’ve probably used Tor Browser, and if you’ve used Tor Browser you’ve used Firefox. By lines of code, Tor Browser is mostly Firefox -- there are some modifications and some additions, but around 95% of the code in Tor Browser comes from Firefox.
So, basically, Tor Browser is built on top of firefox after applying some Privacy and Security patches. But this also means, to update Tor Browser, everytime a new firefox version comes means update the Privacy and Security patch codes to make them compatible with the new version of the browser. The latest version of Tor Browser is thus often not built on top of the latest version of Firefox. So how do you know if a feature is compatible with tor or not?

Will it work in Tor browser?

This question first came to my mind when I was writing some hobby code to make a Batman swiping animation. I used various CSS Masking properties. But then someone reported that it wasn't working on Tor browser. Which is when the question hit me, that it does work in firefox then why not on Tor browser? So what I found was the latest version of Tor Browser is built on top of Firefox 52.5.0esr while the latest version of Firefox is 57. So I delved into this question a little deeper and this is the steps you too can follow to know whether a certain HTML, CSS or Javascript feature is supported in Tor browser.

  1.  Start your tor browser. Open About section and there you can find the version of Firefox which is being used.
  2. Alternatively,  You can check the release notes for Tor browser to know about the Firefox version. So right now according to the release blog of the latest Tor browser till date, it is built on top of Firefox 52.5.0
  3. Go to website https://caniuse.com/
  4. Search for the feature you are wanting to use. 
  5. Then, click on show all to get the compatibility over all the versions of the common browser.
  6. Now, to understand whether a feature is compatible, check for the Firefox version on top of which the Tor Browser is built, latest being 52.5
  7. So, I, for example, checked Firefox 52 for the compatibility of CSS Masking properties, which reveals that before Firefox 53, there was only partial support for CSS Masking.

Note: This is not any official way of finding how it works, but this technique works just fine.


Comments

CSS Masking: Mask of Batman

Posted: 2018-01-04T13:23:00+05:30
Recently, I have been watching videos on CSS to know more about the various interesting features in CSS such as grid layout, flex, filter and so on. After all, it is one of the Turing Complete languages. One way I like to learn more about languages is by watching conference talks. So, I was going through the different talks in CSSConf 2015 when I came across this talk by Tim Holman titled Fun.css. It is a really fun talk but one thing that really caught my eyes was the transition between slides using a star wipe. I searched to see if I could find the code for how to do it with purely CSS but didn't get much help. This is when I decided to give it a try myself. But why Star? I would make a Bat Swipe.

So this is the final prototype I made using just CSS without any Javascript.


See the Pen Bat Swipe by Saptak Sengupta (@SaptakS) on CodePen.

The main CSS property that is used in the above example is mask-image and associated CSS Masking properties. What masking does is hiding parts of the visual section of the webpage by the mask layer. there are two ways of masking - CSS or SVG. So you can either use a CSS gradient or luminance to create a mask, or use an SVG image. In our example, we are going to take about how to use SVG.

<div class="content">
<p>Hover</p>
</div>
<div class="wipe">
<div class="content black">
<p>I am Batman!</p>
</div>
</div>

So, in the HTML code we basically have 2 layers. To create that, I made a <div class="content"> with the actual content inside a <div class="wipe">. So the text of the class "content" must remain hidden until the wipe class reveals the content.

Now it's time to implement the CSS code to make this thing happen.
.wipe {
mask-image: url(https://vignette.wikia.nocookie.net/logopedia/images/3/3c/Batman_symbol_%282008-2011%29.svg);
mask-repeat: no-repeat;
mask-position: 50% 50%;
mask-size: 0;
}

The above CSS code applies the mask over the content class so that only a part of the content is visible. Here we use mask-image which is a link to the SVG image which we want to use as our mask. Since it's a Bat Swipe, I have used the logo of Batman. You can use pretty much use any SVG image but I would suggest that you use a filled SVG image rather than line art. This is because the SVG masking uses the alpha factor of the image. Say in our case, since the Batman logo is a filled black image on top of a white background, so when we apply it as a mask, the visual area behind the black part of the image is visible, and the area behind white part gets masked or hidden.

The CSS properties mask-repeat and mask-position are used to ensure that there is only one mask no matter whatever the size of the mask and it stays always in the middle. You can modify these parameters based on your use case. Say, you wanted a polka dot mask style, you would want then want to have a black disk mask-image and mask-repeat as "repeat".

The CSS property mask-size is most important in our case to create the effect of swipe or reveal. By now, most of you must have already guessed that to get the effect, what we essentially need to do is increase the size of the image with time. I have done the entire animation of swiping on hover because it is the easiest way to display a transition with only CSS.

So at the beginning, we keep the mask-size as 0 and then we add a pseudo hover property to increase the mask-size to 500% (enough to cover the entire page over most resolutions) with a transition.

.wipe:hover {
mask-size: 500%;
transition: 3s;
}

We apply a transition over 3s using the CSS transition property. So, if you would like a really slow animation instead of a swiping action you can just increase the value of transition property so that the transition of size happens over a longer duration of time.

The only last thing remaining is cross-browser compatibility. So will this code work in all browsers? Sadly, no. As of now, the mask-image and associated CSS properties are fully supported only in Firefox since version 53. However, you can make it work in Google Chrome, Opera and Safari using the prefix "-webkit-". So if you add -webkit-mask-image property as well, then it starts working in chrome and safari as well. Sadly, IE, Edge and Opera Mini doesn't provide any kind of support.




Comments