-
200720 Jul
While preparing an example of using the colours specified in the CSS3 Colour module, I come across something after Minefield (the nightly builds of Firefox 3) updated itself. It now supports the
resizeproperty from the Basic user interface module.Unfortunately, Minefield loads, then freezes and eventually doesn’t respond when trying to use this. This is unsurprising of a nightly release, and was likely due to the other CSS3 properties I was using on the example. The strange thing however is that the examples on the css3.info resize preview page do not work at all.
I decided to strip out a lot of the extra styles and content that I was using, and have an example where resize works both in WebKit and the latest Gecko builds. As this is part of another example that isn’t quite finished yet, there are a number of bugs, which may or may not be my fault. There are also a number of styles which probably don’t need to be there, but are part of a bigger example, that will be coming soon. I just wanted something quick that would show this in action. Feel free to suggest any improvements.
You can check out the resize example here.
So what are the issues? In the example I wanted to make a faux window, much like a desktop application window. The whole window should be resizable as one block. For this I placed the resize on the
app-window div. The main contents of the window had to be scrollable when there is too much contents for the size of the window, but the rest of the contents shouldn’t scroll, such as the title bar (ah2element). Therefore I put the scroll on thecontents div.In Safari there is a problem where both the
h2title bar and the main contents resize independently of each other. There doesn’t seem to be a way to resize the whole containingdivwhere the resize is set. In Firefox this works correctly (or at least how I expected it to work). In Safari the content also can’t be resized smaller that the initial value of thediv. This wasn’t an issue in an earlier build I was using while developing the example.Minefield can be resized down to the minimum size and width requested, but it only resizes correctly horizontally. The
divresizes vertically but the containing contentdivdoesn’t resize at all. This may be a bug of mine as the contents seems to break out of the container slightly at the bottom. I haven’t had time to look into this.One strange thing about Minefield’s support for resize is that it adds a cross-hair icon that allows one to move the contents around the page. This works correctly, unlike the resize, but I can’t find anywhere in the spec which specifies this should be allowed when using
resizeand it isn’t expected behaviour, or at least I wasn’t expecting it, and I didn’t specify that thedivshould be moveable. It would be nice to be able to specify this with a different property however.Also, as I use a Mac, I expect the content to be only resizable from the resize widget on the bottom right hand corner (for better or worse). Minefield ignores this and has its own controls, which can’t be styled as far as I know. I also can’t remove the resize controls after clicking out of the resizable content. They stay until the page is reloaded. As resize has probably just been implemented, it is expected that their will be a number of bugs like this however, so things should improve as more people test out this and other CSS3 properties. Resize with HSLA/RGBA and
overflow: scroll;is particularly buggy for instance.I’m working on the original example, that I’ll post here at a later date, along with an updated version of the overview of the CSS3 Color Module that I posted on my personal blog recently. I guess I’ll have to report the bugs I’ve found to the appropriate places, unless it turns out I have bugs in my code instead.
You can skip to the end and leave a response.
-
Comments
-
01.
user says:Comment » July 20th, 2007 at 8:15 pm
works nice with latest minefield build (2007072005)
-
02.
Interesting; I’m sure this must be only experimental, because it doesn’t seem to follow the spec very much! Hopefully the ability to move the text box around will be disabled by default, otherwise it could play havoc with some designs. Still, nice to know there are new features coming.
I wonder why this doesn’t work on the Preview page?
-
03.
Daniel Luz says:Comment » July 24th, 2007 at 8:54 am
Now that’s weird. Neither example works for me, and I don’t recall seeing any notice on the Burning Edge or the Firefox Builds forums about resizing. Does it still work for you? I’ve tried it with recent builds (but I think I wasn’t on 20070720 anymore when I saw this post; and I’m on Windows XP, by the way), but none of them worked. Maybe it was a very experimental under-development feature that slipped for a day?
-
04.
It’s still working for me on 2007071904. I’ve just downloaded it to make sure, as I was still running 2007070804. I think it may not have worked at home, so for those that can’t see it, i’ve made a snazzy screenshot. BTW, the border-radius is removed when the resize/move handles are shown. Without the handles they display just fine.
-
05.
Gecko doesn’t currently have any code to handle the resize CSS property, so it sounds like there’s a bug in the test that shows it does.
-
06.
Hi David.
Thanks for dropping by. You know more than me as you work for Mozilla, but I assure you it does work in Minefield, at least with the recent builds I’ve tried. I was very surprised myself when it started working. The screenshot above shows that. Could it be something in relation to one of the other features used, such as content editable? It was only since the date of this post that it started working for me.
-
07.
I’ve seen it working for myself in David’s example – unless it was some elaborate hoax!
-
08.
What ever it was, it has now been disabled in the latest build that Minefield just updated itself with. i’d like to know what was causing it to work though.
-
09.
marC says:Comment » July 26th, 2007 at 11:27 pm
David Baron: I’m also quite interested in web standards, and I’m on the W3C’s CSS working group
-
10.
marC says:Comment » July 26th, 2007 at 11:29 pm
haha you guys filter the comments lol :’) i said you site isn’t valid.
and asked if you talk with the team that develops IE.
and could you give us some more information when CSS3 will be ready?
-
11.
marC: valid as in doesn’t validate? The CSS won’t validate as it is using CSS3. I’m not actually sure if the validator accepts CSS3 yet, but to use CSS3 in any meaningful way, one must use vendor specific prepends (there are a lot of reasons why this is so). These obviously wont validate.
I personally talk with the IE team, yes, but through my work with Opera, not in relation to this site.
I’ve no idea when CSS3 will be ready as it is a big spec with many problems it has to solve. That is a big reason why it is modularised. Some modules (such as the colour module) are more ready than others.
-
12.
marC says:Comment » July 26th, 2007 at 11:54 pm
What is the opinion from the IE-team about the web standards and the hardly support (or buggy support) from their browser?
(check gmail)
-
13.
marC: It would be best to check the IE Blog to get answers for that. But I do know that Chris Wilson and the IE team are committed to improving their standards support. They are doing a good job but it will probably take a while before they can focus on CSS3, which is understandable. The rest of us have had a few years head start.
-
14.
marC says:Comment » July 28th, 2007 at 3:19 am
But how hard could it be David? If there is a bug in windows the next day it’s fixed. But with IE it takes years…
Why is it so hard to like implement display: table; display: table-cell; display: table-row;
and many more things..The only thing i see from that IE blog is 1 big sh*t about security and thousands of people who beg for great css implementation and using the standards.
And then why ooh why they use the browser prefix like i think it was -ms- , -moz- etc…
Just implement the css2.1 properties that there are now.. don’t create any others or make your own prefixes just because of your company-ego…make it for us (= webdevs) easy. Please!
i’m sick of the [IF IE] [IF IE 6] [IF gte IE 6] stuff (and i’m not the only one i think) -
15.
Ed Smith says:Comment » August 2nd, 2007 at 5:08 am
Hi, Getting back on topic I just came across this post today after seeing David’s blog on “A mock-up interface using CSS3 Colour” and noticed that the divs were resizable and movable.
I’m using the Linux version of Firefox3 alpha 6 (yes 6 released at the beginning of July) on Ubuntu 7.04 Feisty Fawn.
It works exactly as David said including the vertical resize flaw.
I noticed on the “Resizing divs” example that if I left clicked in the blue region long enough the resizing handles disappeared and if I clicked again in the blue region they came back. It’s buggy to say the least.
Now on the mock-up interface using CSS3 Colour page every time you clicked on the background the handles disappeared, and they didn’t come back when you continued to click on the background. Must be how the different css interacts causing different results.
Personally the movable divs are a neat idea one that Mozilla should implement but in a separate css call.
Ed
-
16.
Ed Smith says:Comment » August 2nd, 2007 at 5:11 am
Edit: my mistake once the handles are gone, you have to click on the div to get them back
Ed
-
17.
[QUOTE]
” I come across something after _Minefield_ (the nightly builds of Firefox 3) updated itself. ”
[/QUOTE]Thanks for putting in the parenthetical description; I’ve been trying to figure out what-in-the-world browser 0.41% of my website visitors were using… (and google wasn’t being much help in this case).
How about Gecko “Camino,” “Iceweasel”, and “BonEcho”?
-
01.
