There’s bound to be a lot of excitement from my colleagues today about the awesome addition of CSS Regions to Mobile Safari and support in Adobe Edge Reflow and Adobe Edge Code. I share it, but I want to focus on the fact that you can start working with these features today in Reflow. For the longest time, I’ve been talking to audiences about both our new tools, and our efforts with the W3C, but to be able to see them come together like this is awesome.
The big question for regions is “how would I actually use it” and fooling around with it in Reflow allows you to answer that for yourself. Where would you use it? Try it and see. My answer: you use it where you need reflowable content that keeps a layout you want despite not being pixel stable. Let me show with this example.
Here is a screenshot of an article layout in Adobe Edge Reflow. You can see I’ve laid the article out in several columns around a picture.
The great thing about Regions is that those columns remain stable despite the contracting screen (as you can see in following screenshot). I don’t have to worry about how the text will layout cause I’ve given it general instructions on how to do it.
But eventually that layout won’t work, those three columns will get too tight. No worries. Reflow allows me to make responsive decisions that really make my content layout correctly, but still allow me some variety in layout.
And finally when the design just won’t work anymore, I linearize the content, and I have an article that is readable everywhere, but has magazine like layout where it make sense.
Keep in mind that right now you’re going to be limited in using these features in Canary and Mobile Safari. But I think our hope is that the more people that make compelling layouts with these technologies, the more browser vendors will see that this is tech that they want to include. So check it out on the Adobe Web Platform Blog, and create some awesome layout in HTML.
Update: If you want to fool around with the Reflow file I used in this example, here you go.
If you were not aware of them CSS Regions are proposal to CSS3 that would allow for some magazine like layouts in HTML pages. Adobe has been leading the charge on getting them into WebKit. They are currently available in Chrome. (Also I think IE10)
Now the way they work:
You create a bit of content in an element like an article
You designate that article as the source of a “flow”
You designate other elements as the recipients of the “flow” (We’ll call them “regions”)
Then when the browser renders the content
The element designated as the “flow” is not shown
The content of the “flow” pours into the “regions”
I have a demo. It only works in Chrome. Resize the screen to see the flowing of the content.
I was presenting on them the other night and I got asked a pretty good question.
Have you thought about how these degrade?
I made a bad joke, then mumbled something about if the browser doesn’t support CSS Regions then the original “flow” element gets displayed and all is well.
I tested it today. And all is not well. Because I still created those region elements. And they show up down at the bottom and add whitespace.
Check out the demo on any browser bu Chrome and you’ll see what I’m talking about all the way at the bottom.
So after some experimentation I decided that the best way to handle this was to create my four regions with CSS exactly how I had but only inject the region holders if the browser supports regions, like so:
I’m working on a little demo mobile application for an upcoming project, and I wanted to add sliding transitions between pages. Pretty simple, right? You just use jQuery, jQuery Mobile, zepto, or one of a bunch of other frameworks, and they handle this for you. I didn’t want to. Part of my goal with this particular project is to challenge myself to work without a framework so that I can see how this stuff works by hand. Also I wanted to keep the HTML as slim and uncrufted as possible
The solution I came up with actually is pretty lightweight and is powered by a little AJAX, some CSS transitions, and CSS transition events. It’s also important to note that this only works with WebKit. (My personal use case is for a mobile application with PhoneGap targeting Android and iOS, so I only need WebKit compatibility.)
First thing is to set the CSS of the body to have a transition on it, so when I move it around it’s animated.
Now comes the transitions. What I need to do to accomplish this page slide is:
Slide the page off the screen to the left.
Instantaneously move the page to the right side off screen
Replace the contents of the body with the new content
Slide the page on to the screen from the right.
I have to do it in that order. If you replace the contents independent of the animation, you get weird effects like the page changing then the animation happening, which looks jarring. Or you get the opposite, the transition happening, then the contents changing. Looks ugly. Trying to time these proved problematic. The best thing to do would be to wait for the transition offscreen to happen, then change the content, then move it back on screen. I was able to do this by using a transition event.
Basically as far as I can tell there is only one transition event “transitionEnd” regardless of browser manufacturer. I haven’t been able to figure that out. Animation events appear similarly limited. So here’s how I did it:
Let me first say that I think it’s awesome that the W3C is taking this on. I think that variables in CSS will ultimately be a good thing. It will make it easy to reuse colors and other CSS properties. It will make large amounts of redundancy go away. It will make CSS files smaller, and therefore give less toe-holds to bugs.
That being said I have a major complaint with the implementation–in a word “data.”
See, here is how CSS variables are supposed to work according to the draft.
I create a property in the root named “data-header-color.”
The naming here is loosely based on the form of custom data attributes in HTML5. However, as defined here, the syntax for variable usage is different from the syntax for variable definition (i.e. data-foo for definition, data(foo) for usage). Some have suggested that the syntaxes should should match, using functional syntax in both cases. Others have suggested using a prefixed symbol instead of functional syntax (e.g. $foo) for both the property and usage.
Well at least they are aware that some might object to this format. So let me add my voice. I object. Variables are a pretty standard construct, people know how they work. Make them work like variables in other languages. I have a bunch of reasons here:
Two different syntaxes for creation and consumption seems confusing
It looks like you’re calling a function, but you’re not. You’re referring to a variable. That’s confusing.
CSS and HTML don’t have a lot of overlap in syntax, why is adding some a good thing?
My preference here is that I can just use plain old words as a variable, then consume them as plain old words. That being said I would be okay with a prefixed symbol, like a $ if it comes down to some sort of parsing issue.
That’s my major problem with the draft, but I have one other issue with the behavior on invalid variables. Like if you set the margin to #FFFFFF. Basically if you have this code:
This sort of change in behavior might be pretty confusing. The explanation makes some sense:
The invalid at computed-value time concept exists because variables can’t “fail early” like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values. I think “attr()” needs to rely on it as well, as its behavior is almost identical to variables.
But I imagine this is something that browser manufacturers can handle as they control the behavior of “throw[ing] away the other cascaded values.” They could hold on to cascaded values until they are done computing variables. But maybe I’m missing something here. But it’s also worth considering if this will make invalid CSS easier to track down. I doubt it, but until a browser implements these, it will be hard to determine if that is true.
Anyway. The good news here is that this is the editor’s draft, not the recommendation. This means that now is the time to start analyzing this spec and commenting on it. So what do you think?
Github has these cool ribbon images that you can use if you want to encourage forking your project on your site. They’re great and I wanted to use them on a little project I am working on. However, one of my goals was not to use any images, but rather produce all display elements with CSS.
It was a little bit of trial and error but I got it working. Basically you do the following:
Create a link in a div with an id of “banner”
Force div#banner to be 149px x 149px.
Set overflow to “hidden”
This creates a square display area that won’t show things that stretch out past the bounds of the box.
Create an A link
Tilt it using a CSS transform
Use relative positioning to pull the ribbon into place
Use CSS shadows to tweak the text and ribbon shadows
Finally I use a CSS gradient in the background of the ribbon to give it the bands that run along the edge.
It doesn’ work on IE before 9. It doesn’t appear at all.
I’m not sure if I’m going to use this. I’ll sound judgmental here, but the fact that it doesn’t show up on IE less than 9 seems like a good thing. Do I want a developer on my project that isn’t using the latest browser? Probably not.
A couple people pointed out that there was a weird doubling of the letters on their browser (Chrome on Windows, and Safari on iPad.) Looks like it was caused by a slight text-shadow I had on the text. The text on the original banner has some anti-aliasing going on, and on some browsers, the text shadow helps it look a little smoother, but on others you get that doubling. So I’ve removed the text shadow. Display should be a little more consistent.
A friend of mine alerted me this weekend to just how much I have a weird fascination with Venn diagrams. I decided to roll with it. So yeah, I have an irrational love of Venn diagrams. But that begs the question, can I make a Venn diagram with just CSS?
But I felt like they had a bit too much fluff in the HTML markup. Not that there is anything technically wrong with their implementations. I prefer complexity in my CSS and not in my HTML. It’s probably just a subjective thing, but I do.
So how do you do it?
First you create 3 divs. 1 for each Venn circle, and 1 for the overlap section. Each div contains a p with content in it.
Then you go to style each of the circles. Give them matching heights and widths, and a border radius of half of the height. This creates the circle. Then give each one an opacity below 1. This will ensure that when they overlap they will form a new color.
I’m doing more work on bringing Finicky to HTML. Another interface that I wanted to reproduce was a custom input for note fields. It’s basically a hand-drawn top and bottom to user editable notes with a hand writing font. As you fill the notes, the area expands and the bottom moves with the expansion. It’s another cool UI tweak that my designer came up with that I want to honor in this version.
My first pass at it tried to use border images to fill the images as border-top and border-bottom on a textarea. I had one giant problem with that: CSS Border images are very unsupported. I couldn’t get them to work on Chrome, and they don’t appear to be accessible on a lot of browsers yet including the mobile browsers I am targeting.
My next attempt used the new HTML5 attribute “contenteditable.” Contenteditable basically says that the content in a given element is editable by the user. This means that I can just create a div that is user editable. The div has the added benefit of being able to dynamically resize itself when new content comes in. This is exactly what I am looking for.
Create a placeholder for a mirror of the textarea content
Create a function for onkeyup for the textarea that:
Sets the mirror content to be the content of the textarea
I’m currently working on porting Finicky over to HTML5 as a training exercise for building real applications (as opposed to more demoware) with HTML5 for mobile. It’s going fairly well, but there was one piece of UI that I was really worried about. It was a little complicated to render in ActionScript, and I feared it might be impossible in HTML. In fact it’s one of the few things I found much easier.
On the edit page there is a button for prompting you to take a picture of an item that you want to save. When you haven’t taken a picture, you see a little camera icon on the button. When you have already selected an image, you see a circular mask of the picture inside a circular frame created by the button. Look at the picture; it’s a lot easier to show than to explain. My designer really did a cool job there on that piece of UI, and I wanted to replicate it.
My first instinct should have been to look up “css mask” as it would probably be the easiest way if it was implemented. I didn’t. I instead went with using border radius to shape my button into a perfect circle and positioning it on top of the original button. In reviewing information on CSS Masking, I don’t think it would be the perfect solution. The images that I’ll be using in my final product are going to come from source images of different sizes. My method allows me to drop in any size/proportioned image into the background-image CSS property of my link and have it still work as a perfect circle. However, my research there makes me want to explore CSS masks more.
Anyway, back to the main point, how did I accomplish this?
First, I make an a link that I’ll use an a as the interactive part of the UI, as well as the holder for my picture. And I’ll wrap it in a div that will hold the button graphics.
Then I set the positioning to relative, to offset it within the containing div. I then fiddled with the top and left until the circle link was pretty equidistant from all sides of the containing div. It wasn’t just straight math because the drop shadow in the graphic made the blue circle of the button not completely in the center of the png file.
Finally I made a class with the picture I wanted to place in the background-image of the button.
Couple things to note here:
I hard coded the CSS for demonstration purposes, in my app, I’ll just add the background-image dynamically via the DOM.
This, like all awesome things, won’t work in versions of IE earlier than 9.
However, it has much more support than using masks, so I think it also wins on that account.
It’s been more than a decade since the call to abolish table-based layouts was started. Many, if not most, designers and developers have come over to the CSS way of doing things (or at least doing it most of the time while occasionally resorting to a table layout when they couldn’t get the CSS to work.) Mixed in with the pragmatic use of tables is the occasional person pointing out the advantages of table-based layouts.
Tables do things when laying out that CSS designs with floats and padding and negative margins haven’t been able to duplicate with the same simplicity: dynamic grids, rows that are all the same height, and vertical centering. There are grid systems, and frameworks that have handled this problem for awhile but they have their warts. CSS-based tables are a good solution to this problem, and have a lot of other benefits. But even then I’ve heard angst about CSS-based solutions (frameworks or CSS tables) basically being the same amount of work and angst as a table for the same result.
Here’s a colleague (Greg Rewis) of mine complaining about the main angst of all of these solutions:
On the other hand objections to using tables are usually based on semantics, SEO, and accessibility:
tables are for tabular data
tables in layout are incredibly hard for screen readers to deal with
table markup adds a lot of cruft to markup
The problem with these issues is that for many people they just aren’t compelling enough. Correct semantics is a lofty goal, but it’s not a goal that clients care about. Accessibility takes a back seat because most of us never bother to fire up a screen reader. Cruft is usually seen as bad, there are other ways to improve page performance and SEO, so this argument sometimes helps but not enough.
Therefore, I’ve added a new reason not to use tables focusing on the current zeitgeist around responsive design:
Once you go table, you cannot go back.
Once you wrap your stuff in tables you cede a lot of control of the presentation to the browser. And most browsers don’t linearize info in a table well because by wrapping it in table markup, you’ve effectively said “don’t linearize this content”. So if you are going to display this info on a mobile device with a smaller width you get scrunched content that is hard to read. Either that, or the mobile browser keeps it wide, but allows you to horizontally scroll, which as you know is a fate worse than death.
Your first attempt to deal with this is to handle this with floats and padding and whatnot. You set everything to float left, so when the screen contracts, things slip under each other. This works very well if you know or hard-set the dimensions of your content beforehand. Otherwise you end up with weird outcomes and odd configurations of your grid. Even if it does work well, typically you’ve needed to add extra structural markup to make it work. Adding the cruft that not doing tables was supposed to take away. And it’s all div’s so it gets hard to keep track of where you are.
Ideally, you want something that acts like a table when you have a wide screen and acts like simple block divs when you are on a small screen. So you take some good semantic HTML, combine it with CSS tables and boom, you have a layout that acts like tables when you are wide, and acts linear when you are small. It also lacks the weird layout issues you get from floating.
There are issues with this approach as well. IE 7 and below doesn’t support it. So that is something to contend with. I choose not to. In browsers that don’t support this, it just looks like the linearized version, which I’m pretty cool with as it is suboptimal, not broken. I’ve also seen a weird issue with it not laying out things correctly when I resize the screen. (If you refresh after resizing, it draws it correctly.) Still tracking this down.
One of the little things I like about Android is the “toast.” If you are not familiar with the toast, it is the little transparent notice you get that operations are done. The best example is the toast that tells you how long you will have to sleep before your alarm goes off. (Pictured here.)
I really like the concept. It usually short-circuits the whole item editing process.
Click save button.
Get feedback that item has been saved.
Manually go back to previous screen.
Click save button & go back & get feedback.
So the first thing I have to do is apply the transition.
You’ll notice a couple of things here. One the syntax for the transform is pretty simple:
[browser css keyword]: [property to animate] [duration] [easing method]
Once you do that, the rest is really simple. Basically, all you have to do is change the value for the property you have added a transform to, and the browser takes care of the rest. So to fade out my toast, I set the opacity to 0. That’s it.