I'm developing a web application that has a certain layout.
I'm mainly using CSS for styling the buttons and using divs and styling them for other layout items.
The problem is that sometimes I need a layout item to be non-rectangular.
Also- designing SVG is easeer and sometimes may produce better results.
My question is: should I use CSS always for the layout, and for instance- combine divs to achieve the non-rectangular effect- or should I use SVG for some of the layout items?
Also- what about the buttons- CSS or SVG?
Thanks!
Bear in mind that SVG isn't supported in older browsers. In particular, in IE8 and earlier. Using SVG will therefore limit your audience.
It is possible to rig older versions of IE to support SVG - there are a number of Javascript libraries which can convert SVG into VML, which was Microsoft's proprietary alternative to SVG. However, this does mean you're running Javascript code unnecessarily; you could cause performance issues in IE, or worse, it could load slow enough that the layout redraws after its loaded.
Therefore, for cross-browser compatiblity reasons, I would suggest not using SVG for your basic page layout.
Where I would use SVG is for graphs and charts, etc. For these, I would use the Raphael javascript library, which makes drawing SVG very easy, and also renders it as VML in IE, without you having to do any explicit conversion.
For creating non-square elements in CSS, there is a hack which uses the CSS borders to draw triangles and other shapes. This works in all browsers (with some minor caveats in IE6), so is great for creating spot-effects like marker arrows and speech bubbles.
See http://jonrohan.me/guide/css/creating-triangles-in-css/ for more info on this.
Great for spot effects, but should stress that I wouldn't recommend it for complex shapes; I have seen some people drawing entire pictures using it -- see http://www.cssplay.co.uk/menu/fivestar and other hacks on the same site -- but as I say, I wouldn't suggest actually doing this, except just to demo a hack like this guy.
Hope that helps.
[EDIT]
Per the OP's comments, he only wants to add a rectangular protruding part to a larger rectangular <div>, so in fact the shape he's trying to create isn't all that complex after all; in fact, it sounds a lot like a tab. Given this, the best recommendation by far is to forget about drawing it with SVG, and simply create two divs: one for the main content and one for the tab. If necessary, a third div can be created to wrap the other two. This may be helpful for referencing the two others together via CSS or Javascript.
I tend to advise you not using SVG for the layout, it's not really its purpose. It's best suited for diagrams, pictograms, charts or maps etc.
using SVG will have disavantages:
-First, support: IE<9 doesnt support SVG, or you'd need an external plugin.
-Integration: it's easy to have SVG inside HTML, but emmbeding HTML in SVG is quite unpractical.
-flow in layout: you can draw shapes easily, but placing blocks/text has to be done manually. in html two consecutive blocks will be displayed one below the second. In SVG you have to place them absolutely, ensure text inside them isn't too long cause their size won't adjust automatically.
I'm almost sure it would be easier to layout with HTML+CSS. And now with CSS3 you can rotate blocks, round borders, cast shadow. I would like to know which particular layout cause you problems.
We are in 2017 now, I belive that all major browsers support SVG.
So I would say SVG is a good option. You will probably need to use JavaScript to adjust elements on the screen and make them responsive, because SVG does not provide things such as flexbox, tables, float, etc. The advantage with that is that you will have more flexibility and will not have to deal with the limitations and side effects of CSS.
Related
So we have this major project and we aim to create a simple wayfinding system through the use of inline SVG that includes zooming and panning feature and is targeted to be deployed on touchscreen units. We wanted to create something similar like google maps or something like this: http://bl.ocks.org/mbostock/3892919
We really wanted to use this plugin but everything are predefined in the script and we really don't know how to do it on inline SVGs (or maybe someone help us explain how the whole code works and maybe teach how to make it work on inline SVGs because we're pure amateurs.). I've looked for a lot of plugins but they all seem to not fit the need.
When in doubt, just scale/move everything.
Zooming essentially involves making the elements bigger/smaller
according to your zoom level and panning involves making the elements
move in relation to your viewport.
So:
On each zoom level, iterate over all your paths and scale them by the
appropriate coefficient.
For panning you can just translate(move) your SVG elements to the
opposite direction of which you are panning towards.
You can learn more about scaling/translating SVG elements by having a look at: SVG transformations
On the other hand some Googling(meaning the 1st result that pops), turns this neat library, which looks pretty straightforward for your purposes.
I plan to build a game an have everything in mind. I know HTML, CSS and Javascript good and it would give me cross browser support so going to use it for sure.
I have a need where I need to show a div (rectangle) and then upon some action animate it to the other shape which you can better see in this picture
Can I animate DIV element or I would need to use SVG or Canvas otherwise?
For drawing arbitrary shapes in the browser, I would suggest using either Canvas or SVG.
I would avoid trying to 'drawing' using HTML <div> elements and CSS. This is possible, but it is a hack at best and can get quite messy, and I certainly wouldn't want to write a game using this technique.
So your best choices are definitely either SVG or Canvas.
The choice of SVG vs Canvas depends as much on what platforms/browsers you want to support as it does on the properties of the two technologies.
Obviously you already know the main difference between SVG (vector graphics) and Canvas (pixel graphics), but the two have differing browsers support as well, which is important to take into account.
With the limited information you've given, I would say that SVG looks like the most natural fit for what you're doing. However, SVG is not yet supported by the Android browser, so if you want your game to run in mobile devices, you need to take that into consideration. This would probably mean you need to use Canvas instead.
If you're sticking to the desktop, all modern browsers support both Canvas and SVG. Obviously both are missing from IE8 and earlier, but IE does support a competing format called VML, which is an XML-based vector language similar to SVG.
If you want to support IE8 (and it's quite possible that you don't!), there are javascript libraries available for IE which will render both Canvas and SVG graphics using IE's VML engine. Obviously this works very well for SVG as the two languages are quite similar. I've heard slightly more mixed reports about the canvas conversion, but you may want to give it a try. Bear in mind that IE8's Javascript engine is quite slow, so a javascript-based graphics format conversion may not give you sufficient performance to be useful in the context of a game.
Hope that helps.
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
Send the text to the server, have the server render an image, display the image. Voilà.
I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
*{
margin:0;
padding:0;
}
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.
I have this page mockup.
How do I realize that cut-Out border on the left?
thanks
There are several possible solutions to this question:
Just use a triangle graphic.
Easy, obvious answer. Probably not what you were looking for, though.
Use a filled in square div, and rotate it 45 degrees.
It works, but is probably overkill for something so simple. Plus rotation can be a bit painful in older versions of IE (it works, but the filter syntax is horrible, and the default rotation point is different from all other browsers, so it can be hairy to get it right). Probably too much effort for a simple effect like this.
Use the CSS triangular-borders hack to make triangles.
It's a bit hacky, but it works well. Read more about it here: http://jonrohan.me/guide/css/creating-triangles-in-css/
Use SVG.
SVG is an XML-based vector graphics format. It is trivial to create something like this in SVG. This would be a great solution, except that IE8 and earlier don't support SVG. Fortunately though, the do support VML, a competing format (IE9 supports SVG, so VML is going to die, but we need to deal with it for the time being). A good solution to this is to use one of the javascript libraries that do SVG-VML conversion on the fly. There's several of them - try this one for example: http://code.google.com/p/svg2vml/. Or you can use the Raphael library to draw in either SVG or VML using javascript.
Which one of these solutions you use is up to you; it depends on what browsers you want to support, whether you're happy with using Javascript, whether you want to avoid adding unnecessary graphics, etc.
I would suggest that the CSS triangular borders hack is probably the best solution for the time being. In the future, SVG will be a better answer, but for now the fact that IE8/7/6 don't support it is a bit of a killer.
The only problem with the triangular borders hack is that it doesn't work in 100% IE6 (see the page linked above for details on that), but even then it's usable. And frankly, I'd just drop support for IE6 anyway.
See: http://jsfiddle.net/WP7gY/
This is the simplest technique I can think of: put a background on the h2, and position it left center.
h2 {
padding-left: 30px;
background: url(black-triangle-image.png) left center no-repeat
}
You'll have to replace any margin-left with padding-left on the h2.
If the container has some padding-left, you can set margin-left: -??px on the h2 to pull it to the left edge.
What's the best, most robust CSS-button definition?
Ideally, I'd like gradients, rounded images, and graceful degradation down to IE8. It would also be great if the buttons didn't use any images, and the buttons scaled horizontally to fit their content.
What's the best solution to this?
Use the tools at http://css-tricks.com/examples/ButtonMaker
It is possible to use gradients, box-shadow, border-radius, rgba colour et cetera in older versions of Internet Explorer, using CSS3 PIE. Look at their demo with all these CSS3 properties.
Now, combine CSS3 PIE with the button maker mentioned in the comments and you're done!
Huge fan of JQuery UI buttons. Demo is here
Yes, they do use some images...but the images are also common to the many other features of JQuery UI, which offers your page some amazing features (and more coming all the time) It does gracefully degrade, and you can extend it to round in IE via another JQuery plugin. My favorite part is ThemeRoller, which allows you to build a page using themeroller capable plugins, then style or change at will, even with a tool that floats over the site. You could easily include a way for your user to switch the entire theme of the site with a button click. Plus, there's an editor to easily make your own themes if you don't like what's there.
As for gradients, you have fade up, fade down, curved fade, patterns, and then "build your own" options with variations of those and more plus color overlays and opacities.
Setting up a button is as easy as: <button class="ui-state-default ui-corner-all" type="submit">Button</button>
There is no way to do what you're asking with CSS only, as gradients and corners were only added as of CSS3 and even now they are still not fully supported.
The best way to achieve gradients now is to use an actual image, you can then be assured that most if not all browsers will support it (if you're using a .png image, IE6 may have an issue with it but there are CSS hacks to get around it).
Rounded corners can be added to the site in two different ways:
The first is via images and you would place these at the corners of the element giving the rounded appearance. What I've said before about .png images still applies here.
The second method is to use JavaScript. Most frameworks will have plugins designed with Web 2.0 features in mind. I recommend jQuery as it's easy to implement.
Out of the above two methods the first one is preferred if you want to make absolutely sure that the users can see curves, however if you aren't too concerned about them having JavaScript disabled I would definitely use jQuery as it's 100 times easier to use.