Common CSS Issues For Front-End Projects
Common CSS Issues For Front-End Projects
Common CSS Issues For Front-End Projects
Ahmad Shadeed
2018-12-27T13:30:11+01:00
2018-12-27T12:44:54+00:00
When implementing a user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is predictable. Keeping track of all of those differences is hard, so I’ve put together a list of common issues, with their solutions, as a handy reference guide for when you’re working on a new project.
Let’s begin.
1. Reset The Backgrounds Of button
And input
Elements
When adding a button, reset its background, or else it will look different across browsers. In the example below, the same button is shown in Chrome and in Safari. The latter adds a default gray background.
(Large preview)
Resetting the background will solve this issue:
button {
appearance: none;
background: transparent;
/* Other styles */
}
See the Pen Button and Inputs by Ahmad Shadeed (@shadeed) on CodePen.
Front-end is messy and complicated these days. That’s why we publish articles, printed books and webinars with useful techniques to improve your work. Even better: Smashing Membership with a growing selection of front-end & UX goodies. So you get your work done, better and faster.
Explore Smashing Membership ↬
2. Overflow: scroll
vs. auto
To limit the height of an element and allow the user to scroll within it, add overflow: scroll-y
. This will look good in Chrome on macOS. However, on Chrome Windows, the scroll bar is always there (even if the content is short). This is because scroll-y
will show a scroll bar regardless of the content, whereas overflow: auto
will show a scroll bar only when needed.
Left: Chrome on macOS. Right: Chrome on Windows. (Large preview)
.element {
height: 300px;
overflow-y: auto;
}
See the Pen overflow-y by Ahmad Shadeed (@shadeed) on CodePen.
3. Add flex-wrap
Make an element behave as a flex container simply by adding display: flex
. However, when the screen size shrinks, the browser will display a horizontal scroll bar in case flex-wrap
is not added.
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
The example above will work great on big screens. On mobile, the browser will show a horizontal scroll bar.
Left: A horizontal scroll bar is shown, and the items aren’t wrapped. Right: The items are wrapped onto two rows. (Large preview)
The solution is quite easy. The wrapper should know that when space is not available, it should wrap the items.
.wrapper {
display: flex;
flex-wrap: wrap;
}
See the Pen flex-wrap by Ahmad Shadeed (@shadeed) on CodePen.
4. Don’t Use justify-content: space-between
When The Number Of Flex Items Is Dynamic
When justify-content: space-between
is applied to a flex container, it will distribute the elements and leave an equal amount of space between them. Our example has eight card items, and they look good. What if, for some reason, the number of items was seven? The second row of elements would look different than the first one.
The wrapper with eight items. (Large preview)
The wrapper with seven items. (Large preview)
See the Pen justify-content by Ahmad Shadeed (@shadeed) on CodePen.
In this case, using CSS grid would be more suitable.
5. Long Words And Links
When an article is being viewed on a mobile screen, a long word or inline link might cause a horizontal scroll bar to appear. Using CSS’ word-break
will prevent that from happening.
Large preview
.article-content p {
word-break: break-all;
}
(Large preview)
Check out CSS-Tricks for the details.
6. Transparent Gradients
When adding gradient with a transparent start and end point, it will look black-ish in Safari. That’s because Safari doesn’t recognize the keyword transparent
. By substituting it with rgba(0, 0, 0, 0)
, it will work as expected. Note the below screenshot:
Top: Chrome 70. Bottom: Safari 12. (Large preview)
.section-hero {
background: linear-gradient(transparent, #d7e0ef), #527ee0;
/*Other styles*/
}
This should instead be:
.section-hero {
background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
/*Other styles*/
}
7. The Misconception About The Difference Between auto-fit
And auto-fill
In CSS Grid
In CSS grid, the repeat
function can create a responsive column layout without requiring the use of media queries. To achieve that, use either auto-fill
or auto-fit
.
.wrapper {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
(Large preview)
In short, auto-fill
will arrange the columns without expanding their widths, whereas auto-fit
will collapse them to zero width but only if you have empty columns. Sara Soueidan has written an excellent article on the topic.
8. Fixing Elements To The Top Of The Screen When The Viewport Is Not Tall Enough
If you fix an element to the top of the screen, what happens if the viewport is not tall enough? Simple: It will take up screen space, and, as a result, the vertical area available for the user to browse the website will be small and uncomfortable, which will detract from the experience.
@media (min-height: 500px) {
.site-header {
position: sticky;
top: 0;
/*other styles*/
}
}
In the snippet above, we’re telling the browser to fix the header to the top only if the viewport’s height is equal to or greater than 500 pixels.
Also important: When you use position: sticky
, it won’t work unless you specify the top
property.
Large preview
See the Pen Vertical media queries: Fixed Header by Ahmad Shadeed (@shadeed) on CodePen.
9. Setting max-width
For Images
When adding an image, define max-width: 100%
, so that the image resizes when the screen is small. Otherwise, the browser will show a horizontal scroll bar.
img {
max-width: 100%;
}
10. Using CSS Grid To Define main
And aside
Elements
CSS grid can be used to define the main
and aside
sections of a layout, which is a perfect use for grid. As a result, the aside
section’s height will be equal to that of the main
element, even if it’s empty.
To fix this, align the aside
element to the start of its parent, so that its height doesn’t expand.
.wrapper {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 20px;
}
// align-self will tell the aside element to align itself with the start of its parent.
aside {
grid-column: 1 / 4;
grid-row: 1;
align-self: start;
}
main {
grid-column: 4 / 13;
}
(Large preview)
See the Pen main and aside by Ahmad Shadeed (@shadeed) on CodePen.
11. Adding fill
To An SVG
Sometimes, while working with SVGs, fill
won’t work as expected if the fill
attribute has been added inline in the SVG. To solve this, either to remove the fill
attribute from the SVG itself or override fill: color
.
Take this example:
.some-icon {
fill: #137cbf;
}
This won’t work if the SVG has an inline fill. It should be this instead:
.some-icon path {
fill: #137cbf;
}
12. Working With Pseudo-Elements
I love to use pseudo-elements whenever I can. They provide us with a way to create fake elements, mostly for decorative purposes, without adding them to the HTML.
When working with them, the author might forget to do one of the following:
- add the
content: ""
property, - set the
width
andheight
without defining thedisplay
property for it.
In the example below, we have a title with a badge as a pseudo-element. The content: ""
property should be added. Also, the element should have display: inline-block
set in order for the width
and height
to work as expected.
Large preview
13. The Weird Space When Using display: inline-block
Setting two or more elements to display: inline-block
or display: inline
will create a tiny space between each one. The space is added because the browser is interpreting the elements as words, and so it’s adding a character space between each one.
In the example below, each item has a space of 8px
on the right side, but the tiny space caused by using display: inline-block
is making it 12px
, which is not the desired result.
li:not(:last-child) {
margin-right: 8px;
}
(Large preview)
A simple fix for this is to set font-size: 0
on the parent element.
ul {
font-size: 0;
}
li {
font-size: 16px; /*The font size should be reassigned here because it will inherit `font-size: 0` from its parent.*/
}
(Large preview)
See the Pen Inline Block Spacing by Ahmad Shadeed (@shadeed) on CodePen.
14. Add for="ID"
When Assigning A Label Element To An Input
When working with form elements, make sure that all label
elements have an ID assigned to them. This will make them more accessible, and when they’re clicked, the associated input will get focus.
<label for="emailAddress">Email address:</label>
<input type="email" id="emailAddress">
Large preview
15. Fonts Not Working With Interactive HTML Elements
When assigning fonts to the whole document, they won’t be applied to elements such as input
, button
, select
and textarea
. They don’t inherit by default because the browser applies the default system font to them.
To fix this, assign the font property manually:
input, button, select, textarea {
font-family: your-awesome-font-name;
}
16. Horizontal Scroll Bar
Some elements will cause a horizontal scroll bar to appear, due to the width of those elements.
The easiest way to find the cause of this issue is to use CSS outline. Addy Osmani has shared a very handy script that can be added to the browser console to outline every element on the page.
[].forEach.call($$("*"), function(a) {
a.style.outline =
"1px solid #" + (~~(Math.random() * (1
(Large preview)
17. Compressed Or Stretched Images
When you resize an image in CSS, it could be compressed or stretched if the aspect ratio is not consistent with the width and height of the image.
The solution is simple: Use CSS’ object-fit
. Its functionality is similar to that of background-size: cover
for background images.
img {
object-fit: cover;
}
(Large preview)
Using object-fit
won’t be the perfect solution in all cases. Some images need to appear without cropping or resizing, and some platforms force the user to upload or crop an image at a defined size. For example, Dribbble accepts thumbnails uploads at 800 by 600 pixels.
18. Add The Correct type
For input
.
Use the correct type
for an input
field. This will enhance the user experience in mobile browsers and make it more accessible to users.
Here is some HTML:
<form action="">
<p>
<label for="name">Full name</label>
<input type="text" id="name">
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email">
</p>
<p>
<label for="phone">Phone</label>
<input type="tel" id="phone">
</p>
</form>
This is how each input will look once it’s focused:
(Large preview)
19. Phone Numbers In RTL Layouts
When adding a phone number like + 972-123555777
in a right-to-left layout, the plus symbol will be positioned at the end of the number. To fix that, reassign the direction of the phone number.
p {
direction: ltr;
}
(Large preview)
Conclusion
All of the issues mentioned here are among the most common ones I’ve faced in my front-end development work. My goal is to keep a list to check regularly while working on a web project.
Do you have an issue that you always face in CSS? Let us know in the comments!
(dm, ra, al, yk, il)
From our sponsors: Common CSS Issues For Front-End Projects