in case that you have no choice and had to do css image resize (in my case about 20% smaller than natural image size) browser addons like Hoverzoom for Google Chrome, or Thumbnail Zoom Plus for Mozilla would show popup when you hover over that images.
I want to prevent that behaviour because it totally change user experience in one my UI form.
I understand that there is options to analyse all that addons and how they works, eg. use some event (onmouseover/mouseover) steal src tag - analyse - add some layer, id, class...
Eg. inside Hoverzoom addon for Google Chrome we can find some parts like:
z-index:2147483647
or
$('<div id="hzImg"></div>').appendTo(document.body);
and temporarily solution to disable only that addon is to hide that layer with
#hzImg{display:none!important;}
but it's not way to go because there is many addons like that.
My question is what is your opinion, or solution how to prevent all that browsers type addons to show popups when user mouse hover over css resized images?
Thanks.
Related
Is there any way of setting the browser's tab background color (not the favicon image) and text color with the help of an browser extension/addon.
I've searched the internet to and fro and found nothing in the APIs. So I think it is not possible. But maybe someone has a solution for that.
What I want to achieve is to tint the colors of TYPO3 tabs according to the application context (Development, Production/Staging, Staging). I managed to set the top-bar color in the TYPO3 backend depending in the application context, so the logic works well. What I'd like to have now is a way of tinting the tab.
You are right: there's nothing in Firefox or Chrome API that allows you to color individual tabs easily. But there are some workaround ideas..
Colorful Tabs uses theme override to style individual tabs, including (by default) based on domain, using the browser.theme API that only Firefox supports. However, after trying it out, it might not fit your requirements: in current Firefox version it only affects the color of the currently selected tab (and the address bar), not providing you with a good overview.
Some other extensions for Firefox, for example TST Colored Tabs use sidebar tab representation that duplicates the tab bar, with possible enhancements. Also not ideal, and also Firefox-specific.
For Chrome, there's a Chrome-specific API tabGroups that can add color outline to tabs, but only by adding them to a group. You can have many groups, but it's still going to be ugly if your tabs are interspersed or moved around.
So let me propose an out of the box solution: use a custom favicon per application context instead of trying to change how the tab UI looks. That would be always visible in the tabs strip without any code on the browser's part. You could also override favicons from extension code if there's no easy way to do it on the application side.
I used Coverage to identify unused CSS and JavaScript Code on my landing page. This helped tremendously to reduce loading times. But now I experience the problem that when I view my page on a small device there seems to be missing css code (or javascript code not sure about that) for a drop down menu which should transform into a burger menu.
So my question is how does coverage calculate code which is not used. Does it do this just with the current browser view (which probably does not use all css code in case of responsive design?)
If this is true how can I find out whats really not used. Try various resolutions and run coverage several times?
Anyone experience the same problems?
The coverage panel is "live", as you use the page more CSS and JS will be used.
What I mean is that when you first load the page all of the CSS and JS required to render and make interactive that initial view will be highlighted as green and needed. If you then opened your menu that CSS would turn green as it was used. If you never open your menu with the coverage panel running it will not count the CSS as needed.
So because your menu CSS code was not needed when you ran the coverage panel and you removed the CSS for the menu you obviously will have issues.
You are kind of misusing the coverage panel, it is more intended to help you optimise your critical CSS or to find libraries that are completely unused.
If you want to use it to identify CSS and JS that is not used at all you would have to resize the screen to every break point (to account for different screen sizes and the different layouts you use for mobile, tablet etc.), open every menu item, tab to all areas of the site, fill in all the forms, both correctly and incorrectly etc. to ensure all states were covered and the relevant CSS and JS was used.
If you did manage to successfully do the above, that would show you the coverage for one page, but what about other pages? You would have to repeat the process there to ensure you haven't removed a needed style. As you can imagine this is not likely to be successful without mistakes!
Instead you should use the coverage panel to identify items that are required for "above the fold" content as this means you can inline any critical CSS and JS within your initial page HTML and get sub 1 second First Contentful Paint etc. (Yet again you need to resize the screen here to account for different breakpoints, but you do not need to open menus etc.)
Don't use it to try and identify things that aren't used unless you are absolutely certain they will not be needed (for example if there is a whole library included by mistake that does not get used, you can safely remove that.)
I'm working on a web project that has some accessibility features mandated by the client, including a "font size changer" to allow the font size to be increased for visually impaired users.
Despite my arguments that a better experience will be had by using the built-in zoom features in the browser, the client has insisted that their users will not know to use these built-in features, so we must provide a text size changing widget.
What I'd like to do, if possible, is cause these page elements to invoke the browser's own zoom functionality (Ctrl + + in firefox, for example). If the browser doesn't support this method of zooming, then I might fall back to increasing the font size with css.
How can I best implement this kind of feature? Is it even possible? Is there some solution that I've overlooked?
There is no way as far as I know to use the browser's built in function. However it can be done with CSS3 or javascript. for a CSS3 example look here: http://www.css3.com/css-zoom/
very quick one, I was always wondering, do internet browsers use for rendering OS API functions to create buttons, render mages and so, or do they render it all on their own?
I first thoght that it uses system api, but there are some effects like when screen fades into grey and you see only small window in the middle, you know, thet effect used on many picture albums online, which I dont really how to achive using for example only Win32 calls.
EDIT: To be more exact, I know that final drawing on screen will always use system API, but you can send prerendered image as you want to it. Thanks.
Web browsers use their own rendering engines rather than OS API. Using OS API to render buttons totally depends on the design decision of a particular rendering engine. However, to run on various operating systems these engines prefer their own rendering to offer same look-n-feel across platforms.
Gecko, for Firefox
Trident, for Internet Explorer
Presto, for Opera
KHTML, for Konqueror
WebKit, for Apple's Safari and Google's Chrome web browsers.
Ref: http://en.wikipedia.org/wiki/Web_browser_engine
Do browser rendering engines useOs api for creating buttons, writing text, creating boxes, etc., or do they render all of this on their own using OS API just for actually show the rendered image on the screen?
I implemented something of a browser rendering engine (see e.g. Table of Supported Elements and Supported Properties for a list of the HTML elements and CSS properties that it supports).
I use system APIs (.NET Framework APIs, which are thin wrappers around underlying O/S GDI APIs) to:
Measure words (strings of text)
Paint words
Draw lines and boxes
Fill rectangles with solid color
These are the kind of API functionality that's implemented by the Windows GDI.
There are also some system (O/S or .NET) APIs that I use, to draw buttons and combo boxes (see Rewrite standard controls like edit, combo, etc?).
Becouse, the whole rendering of text, graphics and so seems pretty hard to write completely yourself
Yes, implementing CSS and everything does take a while. You've seen how long it took the browser developer teams to implement: several calendar years, many person-years.
I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text