CSS pitfalls and how to overcome them
来源:互联网 发布:消防联动编程 编辑:程序博客网 时间:2024/05/22 07:40
When you write CSS, there are some problems you may run into. Then, to overcome the situation, you’ll need to use some small and effective CSS tricks.
In this article I’ll try to show you some tips and tricks that can definitely help you when writing CSS.
Buttons styling
I’ll begin with classical HTML buttons. When trying to style buttons like input type"submit"
orbutton
, if you want to achieve pixel perfection in your designs, don’t forget about the following:
/* removes extra side spacing in IE */.button{ overflow: visible;}/* removes extra inner spacing in Firefox */.button::-moz-focus-inner{ border: 0; padding: 0;}
Want to see some buttons that are using the above snippet?
- Just some other awesome CSS3 buttons
- Design a beautiful CSS3 search form
- Cool CSS3 search box
Using pseudo-elements
I’m sure you already know that using pseudo-elements like :before
and :after
helps you specifying which content should be inserted before (or after) the content of that element. Besides that, elements like input
or img
have no content, therefore, the pseudo-elements will not render anything for them. An exception is the hr
element, which, for some reason, allows adding pseudo-elements to it.
Also, keep in mind the difference between :before
and ::before
. To summarize it, IE8 is the only reason to use the single colon syntax.
Gradient background for whole body
If you tried before to add a CSS3 gradient for your body
, then you noticed that it will not stretch and it will repeat instead. To fix that, just add the following lines:
html { height: 100%;}body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed;}
Fake transitions on gradients
Speaking of gradients, want transitions for CSS3 gradients? Unfortunately, there’s no browser support for gradients transitions (yet).
But, this can be done using some tricks like:
- Use
background-position
on:hover
to give the illusion that the gradient is transitioning. Actually, it’s shifted using the Y-axis only. This technique is used by Twitter’s Bootstrap.a{ background: linear-gradient(orange, red) repeat-x; display: inline-block; padding: 20px;}a:hover{ background-color: red; background-position: 0 -15px; transition: background-position .1s linear;}
- The second option (and my favorite) is to transition the
background-color
and apply a gradient image to it which fades to transparent value. Again, this gives the illusion of an transitioning gradient.a{ background-color: orangered; background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); transition: background-color .1s linear; display: inline-block; padding: 20px;}a:hover{ background-color: red;}
Inline-block gaps
Let’s say you’d like to use inline-block
instead float
for a horizontal list. When doing that, a horizontal space will appear between your inline-block
elements. To avoid that, you’ll need to use a dirty (also good) method, namely adjust your markup.
So, instead using a clean structure like the below one:
<ul> <li>one</li> <li>two</li> <li>three</li></ul>
you’ll have to use something like this:
<ul> <li>one</li><li>two</li><li>three</li></ul>
Read more about the CSS display inline-block
value: Why it rocks, and why it sucks.
When height 100% actually works?
It’s actually quite simple: when you set a height: 100%
for an element, always think about the parent’s height. If the parent’s height is not defined in your styles, then the inner element will have height: 100% of nothing.
Please consider the following working (and rough) example:
<div id="parent"> <div id="child">2</div></div>
and
#parent{ height: 400px; padding:10px; background:red;}#child{ height: 100%; background:green;}
In the above example, the green colored #child
, using height: 100%
, will stretch and fill the whole 400px
vertical space. Also, you can check my CSS3 progress bars for a live example of the above trick.
Rounded corners for tables
The trick consist of setting the table’s border-spacing
to 0
. The border-collapse
‘s default value is separate
, you’ll only need to set it to collapse
for IE7 and lower ( for a graceful degradation).
table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; border-radius: 5px;}
Check my CSS3 tables with rounded corners article to read more about it.
Inputs box model
When designing a search box, for example, you’ll notice that after setting the same height
orwidth
for your input type="submit"
and input type="text"
, the result will most likely disappoint you.
Quite frustrating, but the thing is that input type="submit"
has a border-box
box model, whileinput type="text"
has a content-box
box model (on IE and FF).
To overcome this kind of of issue, you can set for both form’s inputs (text and submit) the same box sizing model. This can be done using CSS3 box-sizing
:
box-sizing: content-box | padding-box | border-box;
Conclusion
The above are just some tricks I often use when writing CSS. I found them very useful, and I sincerely wish I knew them at the beginning.
I hope you enjoyed these and feel free to share yours by adding a comment below. Thank you
- CSS pitfalls and how to overcome them
- How to Overcome Fear, Sadness, Anger and Grief
- Project Disasters and How to Survive Them
- JavaScript Errors and How to Fix Them
- Keyloggers: How they work and how to detect them
- Ground loop problems and how to get rid of them
- Memory leaks in C++ and how to avoid them
- Issue from FindBugs,and how to deal with them
- How to protect your accounts' passwords and remember them well
- how to find background job and stop them
- How to Avoid Use-Case Pitfalls
- How to Avoid Use-Case Pitfalls
- How to Avoid Use-Case Pitfalls
- How to avoid Unicode pitfalls in Mojolicious
- How to overcome the issues of configuring condor
- How to overcome “datetime.datetime not JSON serializable” in python?
- Fifty Ways to Lose Your Data (and How to Avoid Them)
- How to Output a List of Files to a File and Sort Them in Linux
- 看其他人是怎么安排读书时间的
- 03_Activity 生命周期介绍【图解】
- 将String保存成文件
- SSH简介
- j2se小节
- CSS pitfalls and how to overcome them
- VS2010/2008 C++ program error:output window disappears 运行窗口自动退出
- “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
- 字符串的倒序输出
- ubuntu eclipse安装
- NAND Flash的驱动程序设计
- web config 详细
- B-树 实现
- 蓝色妖姬玫瑰的js实现