Loading...

How to Solving Common CSS Problems

View: 739    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for its corresponding video about the letter Q, thequotes property, here.

As a bonus bit of content in this article as a part of our AtoZ CSS Series, I’ve answered the most common questions I’ve received about CSS which I hope will be useful.

Q is for Questions about CSS

There is literally nothing else to say on the topic of CSS quotes, nor is there any other selector, property or value that starts with Q. So, in this week’s tips, I answer some common questions I get from my students, AtoZ supporters and fellow professionals.

How do you center things vertically in CSS?

I get this one a lot. And I get this one in addition to the more general question of how to horizontally center things in CSS which I addressed in an earlier tip all about floats.

On the topic of vertical centering, some people will tell you it’s really difficult. But these days it doesn’t require much CSS and can be done on any element – even in a responsive project when you don’t know how wide or tall the container or the element to be centered is.

Take the following HTML which marks up a simple .modal message box inside of a container:

<div class="modal"> 
  <h2>Message title</h2> 
  <p>Message text lorem ipsum dolor sit amet</p> 
</div>

To absolutely center the .modal element we can combine absolute positioning with translate.

Step one is to put the top left corner of the box right in the center of the parent container – which we can do by offsetting its top and left edges by 50% of the height and 50% of the width of the parent container:

.container {position: relative; width: 100vw; height: 100vh;} 
.modal {position: absolute; top: 50%; left: 50%;}

Step two is to bring the element back into the absolute center of the container. We need to move it back by half of its widthand up by half of its height.

If we know the dimensions of the .modal we can achieve this with some negative margin and divide the width or heightby 2 to get the required value. But if the .modal is likely to change size (due to being sized with percentages for example) this won’t work.

Instead, using a translate transformation, we can move the element by a percentage of its existing size.

.modal {position: absolute; top: 50%; left: 50%;}
/* back by half its width, up by half its height */
transform: translate(-50%, -50%);

And there you have it, the element is perfectly centered even with a variable size.

How do you deal with vendor prefixes in CSS?

You may have noticed in the first tip about vertical centering that I used a transform without adding the vendor prefixes. This is for two reasons. Firstly, it makes tutorial code easier to read and type and secondly for one little secret: I don’t write any vendor prefixes anymore.

I still occasionally find myself at the excellent caniuse.com to check on browser support for various properties and features but these days I don’t write any prefixes in my code.

This is not because I don’t care about users of browsers other than the one I develop in. And it’s not because I’m lazy and a bad developer. I don’t write vendor prefixes because I have an automated task that adds them for me, so I never have to think about them again.

I’d highly recommend using a pre-processor to write your CSS (I use Sass but have also used all the others to try them out) and I’d recommend adding Autoprefixer to your process too. Autoprefixer is a plugin for PostCSS which automatically adds the necessary prefixes to your compiled CSS based on the data from caniuse.com.

There are plugins available for all the popular task automators and I can’t recommend it highly enough!

My CSS isn’t working. Can you help?

The short answer is, probably. But it’s always really hard to debug someone’s code remotely or based on a description of the problem. Instead, let me outline my process for debugging wonky CSS:

  • Check the relevant files are saved
  • Check the syntax highlighting in your editor and look for any inconsistencies
  • Check for missing quotes, brackets or semi-colons
  • Ensure the files I’m editing are what I’m looking at in the browser
  • Ensure any paths are correct (for CSS files, images or anything else). You can check to see that all your external files have been loaded correctly in the Network, Sources or Console tabs in your developer tools
  • Inspect element and ensure that all class names have been spelled correctly
  • Inspect element and ensure that all CSS properties have been spelled correctly (in Chrome, any invalid properties or values will be marked with an orange alert icon in the elements view)
  • Inspect element and play around with values to see what changes
  • It’s likely that you’ll have caught the issue by now but if not, some deeper digging is needed

This may be a good point to ask for help either online or in person. If you do ask people for help, make sure you can send them a link to a Codepen or JSFiddle of your problem so they can see what you’re struggling with.

Grunt or Gulp?

It took me a while to get on board with Grunt but eventually I did. To start with I didn’t really get what it was for but when I realized I could use it to launch a local server, compile my Sass, compress my JavaScript and alert me to any syntax errors while I type, I was convinced. It took me a while to get used to but I was happy.

How to Solving Common CSS Problems

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for its corresponding video about the letter Q, thequotes property, here.

Posted on 20-10-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 24    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 28    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 40    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 36    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 33    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 24    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 273    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 224    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd