sorted by: recent | see :
popular
Content Tagged with Safari + css
Safari Web Content Guide for iPhone (PDF)
文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
CSS Variables are …. here!
We talked about how CSS variables are next a few months back, and now they are here!
WebKit now has an experimental implementation of CSS variables:
You can test this feature using a WebKit nightly
Once again, via Dylan Schiemann.
How to get Cross Browser Compatibility Every Time | Anthony Short | Web Design & Development
IE NetRenderer - Browser Compatibility Check -
XRAY :: for web developers
The Sea of Ideas " Blog Archive " Coverflow, anyone?
Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know
CSS Variables are next?
How long have you wanted to name colors and such in your CSS instead of having to use search and replace (which breaks if you share the same colors ;) ?
We have a proposal thanks to Daniel Glazman and the ubiquitous David Hyatt.
Since the release of CSS Level 2 Recommendation ten years ago in may 1998, the Web authors' community has been requesting a way of defining variables in CSS. Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations. If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair. We expect CSS Variables to receive a very positive feedback from both the Web authors' community and browser vendors.
With Dave on the author list, we can expect the following to work on WebKit sometime soon!
-
-
@variables {
-
CorporateLogoBGColor: #fe8d12;
-
}
-
-
div.logoContainer {
-
background-color: var(CorporateLogoBGColor);
-
}
-
(via Dylan Schiemann)
CSS Gradients in WebKit
Dave Hyatt, the one person I would love to get to TAE to join the other browsers, posted about CSS gradients in WebKit:
CSS:
So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere. :)
You can use gradients in the following places:
- background-image
- border-image
- list-style-image
- content property
The type of a gradient is either linear or radial.
A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.
A radius is a number and may only be specified when the gradient type is radial.
A stop is a function, color-stop, that takes two arguments, the stop value (either a percentage or a number between 0 and 1.0), and a color (any valid CSS color). In addition the shorthand functions from and to are supported. These functions only require a color argument and are equivalent to color-stop(0, …) and color-stop(1.0, …) respectively.
This is great stuff. Think about the image repeating tricks you have had to do just to get some of this behaviour. This is much more elegant.
There are a bunch of examples:
And in conclusion, we have a lot more coming:
WebKit now supports a generic architecture for generated images, making it easy to add new generator effects to CSS in the future (lenticular halos, checkerboards, starbursts, etc.). The rules for sizing of these generated images will match whatever is decided for SVG content with no intrinsic size (the two are sharing the same rules right now).
We encourage you to try gradients out and file bugs if you see any unexpected or weird behavior. They will degrade safely in other browsers as long as you use multiple declarations (e.g., specify the image in one declaration and the gradient in a following declaration).
Native CSS selectors with querySelector
David Smith of WebKit posted about their native implementation of querySelector and querySelectorAll from the W3C Selectors API.
Native CSS selectors in the browsers is going to be a huge boon for us and the Ajax libraries that will be able to use them.
You can use the standard via:
* Get all the elements with class "hot" (duplicating getElementsByClassName)
* A common use for this is as a toggle;
* for example, a search feature might tag results with a class
*/
document.querySelectorAll(".hot");
/*
* Get the currently hovered element
*/
document.querySelector(":hover");
/*
* Get every other element in the <li> with id "large"
* This is mostly useful for doing "zebra stripe" alternating rows.
* Once CSS3 becomes more widespread, doing this directly via CSS will be more practical
*/
document.querySelectorAll("#large:nth-child(even)");
Our favourite libraries can implement the same API and do the hard work in JavaScript if the browser doesn't support it.
Point your new Webkit build at the performance test that they use (based on the mootools one) to see how fast you can be if you are native. Vroom vroom.