Posts Tagged ‘CSS3’

Another version of Firefox has been released and with it another nice new CSS3 property: text-overflow: ellipsis;. This will allow you to display an ellipsis (…) if any text overflows its containing element, making something which used to have to be done with JavaScript or on the server-side now much easier. You will, however, need to include some extra CSS properties to force the any text-overflow to take place:

p {
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Support across other browsers is also very good with support from IE6+, Opera 11 (9-10 using the -o- prefix), Chrome and Safari.

If you’ve tried out any of HTML5’s new input types you’ll probably have noticed that WebKit adds its own default styling to search input fields. This can be a bit of a pain if you’re trying to achieve a particular layout, so you can remove them using the following CSS:

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

Similarly, if you’re browsing the web on an iOS device you’ll notice that it also applies its own appearance to input and textarea elements: rounded corners, grey gradient in the background, etc. This is an even simpler fix, however:

input, textarea {
	-webkit-appearance: none;
}

More on appearance can be found at the W3C editor’s draft.